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

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

不是很通用的，但不应该这样简单的事情工作？

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 

Answer 2

您应该使用状态，否则页面不会被重新描绘。

所以的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} /> 

你应该definitly经历一个oficial intro tutorial。