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

【问题标题】：How to enable/disable button on selecting radio button?如何在选择单选按钮时启用/禁用按钮？
【发布时间】：2017-02-16 14:05:43
【问题描述】：

我是 reactjs 的新手。目前在我的应用程序中，我想启用和禁用选择单选按钮的按钮。下面是我的代码：

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

谢谢

【问题讨论】：

Dynamic attribute in ReactJS的可能重复

标签： javascript reactjs redux react-bootstrap redux-form

【解决方案1】：

你应该使用state，否则页面不会被重新渲染。

所以 onClick 或 onChange 事件你需要更新 state

setButtonDisability = (event: React.MouseEvent<HTMLInputElement>) => this.setState({ isButtonDisabled: /* value from event target */ })

只需将onClick={this.setButtonDisability} 或onChange={this.setButtonDisability} 添加到您的<Field /> 组件。

然后在渲染函数中使用它

<Button name="button" disabled={this.state.isButtonDisabled} />

你一定要通过oficial intro tutorial。

【讨论】：

【解决方案2】：

不是很通用，但是这个简单的东西不应该有用吗？

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

【讨论】：