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>

一次禁用多个单选按钮

1 个答案: