javascript - 一次禁用多个单选按钮

Question

在此组件中，我有一个单选按钮和一个连续的文本框。当选择单选按钮时，该行中的输入字段被启用。当未选择单选按钮时，该行中的输入字段将被禁用。我该如何使用 React 来做到这一点？

 <div className="row">
      <input value="one" name="stars" type="radio" />
       <input type="number" className="number-input"/>
   </div>
<div className="row">
      <input value="one" name="stars" type="radio" />
       <input type="number" className="number-input"/>
    </div>
    <div className="row">
      <input value="one" name="stars" type="radio" />
       <input type="number" className="number-input"/>
    </div>

Answer 1

一种方法可能是使用状态跟踪值:

  <div className="row">
      <input value="one" name="stars" type="radio" checked={this.state.oneChecked} onChange={e=>this.setState({oneChecked: e.target.checked})}/>
      <input type="number" className="number-input" disabled={!this.state.oneChecked} />
  </div>
  <div className="row">
      <input value="two" name="stars" type="radio" checked={this.state.twoChecked} onChange={e=>this.setState({twoChecked: e.target.checked})}/>
      <input type="number" className="number-input" disabled={!this.state.twoChecked} />
  </div>
  <div className="row">
      <input value="three" name="stars" type="radio" checked={this.state.threeChecked} onChange={e=>this.setState({threeChecked: e.target.checked})}/>
      <input type="number" className="number-input" disabled={!this.state.threeChecked} />
  </div>