选择单选按钮来更改状态

Question

如何设置input type="radio"状态值将根据用户选择而变化？

在这种情况下，我希望按钮name="1"成为默认选择的按钮，但如果name="2"用户选择按钮，则某些状态值应该改变。

<div data-toggle="buttons">
  <label>
    <input type="radio" name="1" defaultChecked onChange={this.handleRadioButton}>Option 1</input>
  </label>
  <label>
    <input type="radio" name="2" onChange={this.handleRadioButton}>Option 2</input>
  </label>
</div>

Answer 1

您handleRadioButton需要知道单击了哪个按钮。我建议一个简单的函数参数。IE

onChange={() => this.handleRadioButton(1)}

onChange={() => this.handleRadioButton(2)}

您的函数可能如下所示：

handleRadioButton(value) {
  this.setState({
    value: value
  });
}

最后，必须从该状态值读取已检查的状态。IE

checked={this.state.value === 1}

所以把所有这些放在一起......

<input type="radio" checked={this.state.value === 1} onChange={() => this.handleRadioButton(1)} />

<input type="radio" checked={this.state.value === 2} onChange={() => this.handleRadioButton(2)} />

还有几件事：

• 不用担心物业defaultChecked。只需设置value: 1为初始状态即可。
• 不需要像name和 之类的 HTML 属性value。在 React 中，HTML 逻辑被 JavaScript 逻辑取代。（警告：除非您提供服务器渲染的非 JS 后备。）