一次禁用多个单选按钮

Question

In this component I have a radio button and a text box in a row. When the radio button is selected the input field in that row is enabled. When the radio button is not selected the input field in that row is disabled. How would I do this using 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

One approach might be to track the value using state:

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