一次禁用多個單選按鈕

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>