button onClick doesn't work when disabled=True is initialized (Reactjs)-CodePudding

I have a button which I initialize as disabled that I enable when another event happens. But when I click on it the onClick function isn't called.

<div className='button-parent'>
    <button id="saveButton" type="button" onClick={updateBill} disabled={true} className="button">Save</button>
</div>

I have the opacity change when it's enabled, so I'm sure it's enabled when I try to press it and it doesn't work.

I'm sure the function is fine as when I add the onClick to the parent element, it works fine.

CodePudding user response：

Use a state to manage the disabled condition instead of hardcoding it to true.

const [isDisabled, setIsDisabled] = useState(true)

<button id="saveButton" type="button" onClick={updateBill} disabled={isDisabled} className="button">Save</button>

When your other event happens and you want to enable it just

setIsDisabled(false)

CodePudding user response：

You can make something like this :

const [enable, setEnable] = useState(true);

<button id="saveButton" type="button" disabled={enable} className="button">Save</button>

You can call the function to update the state and you can use the following to update state :

setEnable(!enable).

This will toggle the state and enable or disable the button using the previous state.