如何在选择单选按钮时启用/禁用按钮？

Question

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

Answer 1

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 .

Answer 2

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