i'm new in react, i have a button and i'm using google 3D-model viewer. I want when i click on button then take value of button which is an image and render it to the 3D model, my problem is in the button :
<Button id="normals2" value="/WaterBottle_normal.jpeg" type="submit" onClick={handleClick}>Generate</Button>
and im handleClick function i have
document.querySelector('#normals2').addEventListener("submit", (event) => {
createAndApplyTexture('baseColorTexture', event);
});
Related
I have a button with an icon in it. It all looks good and I though everything worked properly but then I started getting undefined behaviors. It turns out that the onClick of the button e.target return either the button press, a polygon or an SVG. It depends if I click the corner of the button, then e.target is the button, if I click on the icon I either get a e.target polygon or svg. I only want to get the button. This is the code for generating the button:
<CButton
color="danger"
value={[name, name2, name3]}
onClick={handleUnlink}>
{<CIcon icon={cilX} />}
</CButton>
This is the code for onClick:
const handleUnlink = (e) => {
console.log(e.target)
};
How do I make sure that a user that accedently presses the CIcon inside the button is still only triggering a button press?
You can use the e.currentTarget property to make sure that a user that accedently presses the CIcon inside the button is still only triggering a button press.
Hello i want to loading a button when i am clicking it. My problem is that my buttons are created dynamic. I am using antd styling for the button. My code is below
<Button
loading={this.state.myLoader}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I was trying using inside onclick method a state that can become true when this function in executed, my problem with this is when i click a button all the button are loading, but i want to loading only the selected button. How i can do this? Inside my onclick method i can take the id of the button that is clicked every time
Try this
this.state = {
myLoader: []
}
In onClick pass the index to the function
this.myFunction = (r, i) => {
const loader = [...this.state.myLoader];
loader[i] = true;
this.setState({myLoader: loader)};
}
in the button
<Button
loading={this.state.myLoader[i]}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
Google recently announced a new way of user-signing-in here.
https://developers.google.com/identity/gsi/web?hl=en
With this tutorial, the button was created by adding HTML code or javascript.
which looks like,
But since the button is all created and rendered in a new Iframe, I can’t customize the button style as I want.
Is there any way to change the button style as it was offered before?
Previously, I used
window.gapi.load('auth2', () => {
const auth2 = window.gapi.auth2.init(options);
auth2.attachClickHandler(
idButtonRef.current,
{},
onSuccessCallback,
onFailCallback,
);
});
idButtonRef.current is the button and all I need was just attach the button and eventlistener as the above code shows. So I was able to create the button style as I want.
Is there a way to do this with a new way of google user signing?
It's my own (and not elegant) way to customize button. I make "right" Google button invisible and then add click handler to my custom button. We need to trigger click() on div with role=button attribute.
My example with plain JavaScript, but you should easily make something similar with React.js:
CSS:
.g_id_signin {
display: none;
}
HTML:
<div id="g_id_onload"
data-client_id="{{GOOGLE_CLIENT_ID}}"
data-login_uri="http://localhost:3000/google"
data-ux_mode="redirect">
</div>
<div class="g_id_signin"
data-type="icon"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<button id="custom-google-btn">Continue with Google</button>
JavaScript:
const googleBtn = document.getElementById('custom-google-btn');
googleBtn.addEventListener('click', () => {
document.querySelector('.g_id_signin div[role=button]').click();
});
I'm using CKEditor 5 as a text editor in a React app. I have a button on a page which when clicked will insert the text "Button was clicked" inside the CkEditor. How can i achieve this? I know CKEditor has the setData method but how will my button click even be able to access the CKEditor?
My ckeditor
<CKEditor editor={ClassicEditor} />
My button
<Button onClick={this.handleClick}>Click Me</Button>
handleClick
handleClick = e => { /* setData in the editor */ };
Step 1:
Before Handle click in ckEditor declaration you need to handle onInit method.
In onInit method CkEditor will give you an instance of editor. You need to save this instance in your local variable.
Step 2:
inside handle click you can use this:
editor.model.change(writer => {
writer.insertText("Button was clicked", editor.model.document.selection.getFirstPosition());
});
I have multiple button on the screen , I want that user either click this button to route to the new item or user could have close this , for that i have given the close icon within the button so that user can close that if they want , but when i am trying to give onclick function to the icon within the button it does not work
how could i do that ???
Here is the demo code
https://codesandbox.io/s/material-demo-rbkr8
try wrapping it with a div onClick like this?
const doSomething = () => {
alert('click here');
}
<div onClick={doSomething}>
<DeleteIcon className={classes.rightIcon} />
</div>