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>
Related
//This is dropdown component
const Dropdown: FC<any> = ({ list, item, title },props) => {
const isDisabled = item && item.users.length > 0 ? false : true;
const [show, setShow] = useState(false);
const toggleMenu = () => {
setShow(!show);
};
return (
<div>
<Button
title={title || "Action"}
onClick={toggleMenu}
iconName="downarrow"
iconPosition="left"
variant="outlined"
color="primary"
/>
)
The action menu is not getting closed even if I click somewhere on page, the menu
remains open until I explicitly click on the Action button again.
If you want the action menu to close when you click anywhere on the page using onClick won't help it. Use onBlur and use it on the button as -
<Button
title={title || "Action"}
onClick={toggleMenu}
onBlur={() => setShow(true)}
iconName="downarrow"
iconPosition="left"
variant="outlined"
color="primary"
/>
Or alternatively, what you can do is -
Create a reference to your outer div.
Add event listener mousedown (or click) to the document whenever this component appears on screen (eg. mount) and also don’t forget to remove the event on unmount too.
Inside the event (handleClick) this.{Any ref name you give}.contains(e.target) will return true if whatever you are clicking is inside the “node” ref.
Now you have it, you can now do whatever you feel like, close the modal, close the dropdown menu list, anything is allowed.
The above 4 points were taken from the article - https://medium.com/#pitipatdop/little-neat-trick-to-capture-click-outside-react-component-5604830beb7f.
I have this 3 buttons here. So at first, the Continue button is disabled, because I want the user to click the Click Here button then only the Continue button can be clicked, where the disabled is then set to false.
Here's what I've tried:
let [clicked, setClicked] = useState(false);
let clickedLink = () => setClicked(() => true)
{
clicked ? <Button href={links[0]} target="_blank" style={buttonStyle2}>Continue</Button> : <Button href={links[0]} target="_blank" style={buttonStyle2} disabled>Continue</Button>
}
But then even after I clicked on the link, the button is still disabled because the clicked state is not updated. How do I constantly check the clicked state as what I did only check the first time when the components are loaded.
I have made a simple button in react app.
<button onClick={console.log('clicked')}>Click</button>
The problem is that button is continuously click without clicked by me.
<button onClick={() => console.log('clicked')}>Click</button>
is the solution. When you put paranthesis without using the arrow function, it will automatically execute without waiting for you to click the button
onClick takes function as a parameter. Try this and it should work correctly:
<button onClick={ () => { console.log('clicked') } }>Click</button>
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 created a button at the bottom of the page which when clicked open a modal.
Now I have a button in a header. I want that when we click on that header button it should too open the modal. That is how can we use the same function which is used for the button which is at the bottom of the page.
Button clicks should set state. State decides if modal is shown
One way of doing it with hooks is having the buttons set state with a boolean value that decides if the modal is shown.
const Component = () => {
const [modalOpen,setModalOpen] = useState(false)
return (
<div>
<button onClick={setModalOpen(true)} >
Open Modal 1
</button>
<div>
Your other content
</div>
<button onClick={setModalOpen(true)} >
Open Modal 2
</button>
<Modal show={modalOpen} />
</div>
)
}