Question

我是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

由于

Answer 1

您应该使用状态，否则页面将不会被重新呈现。

所以 onClick 或 onChange 事件需要更新状态

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

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

然后在渲染功能中使用它

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

你应该明确地通过oficial intro tutorial。

Answer 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

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

2 个答案: