I am new to reactjs. Currently in my application, I want to enable and disable the button on selecting radio button. Below is my code :
class Radiosample extends React.Component {
render() {
<table>
<tbody>
<tr>
<td>
<Field name="radio1" component="input" id="radio1" type="radio"/> // On check of this radio button below button should enable..
</td>
<Button name="button" id="btn">Click Me</Button>
</tr>
</tbody>
</table>
}
}
export default Radiosample
Thanks
You should use state , otherwise the page would not be rerendered.
So onClick or onChange event you need to update state
setButtonDisability = (event: React.MouseEvent<HTMLInputElement>) => this.setState({ isButtonDisabled: /* value from event target */ })
Just add to your <Field />
component onClick={this.setButtonDisability}
or onChange={this.setButtonDisability}
.
And then use it in render function
<Button name="button" disabled={this.state.isButtonDisabled} />
You should definitly go through an oficial intro tutorial .
Not very generic, but shouldn't this simple thing work?
class Radiosample extends React.Component {
function disableButton() {
document.getElementById("btn").disabled = true;
}
render() {
<table>
<tbody>
<tr>
<td>
<Field name="radio1" onclick="this.disableButton()" component="input" id="radio1" type="radio"/> // On check of this radio button below button should enable..
</td>
<Button name="button" id="btn">Click Me</Button>
</tr>
</tbody>
</table>
}
}
export default Radiosample
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.