单选按钮选择以更改状态

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 需要被告知点击了哪个按钮。我建议一个简单的函数参数。即

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

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

您的函数可能如下所示：

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

最后，检查状态必须从该状态值中读取。即

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 和value 这样的HTML 属性。在 React 中，HTML 逻辑被 JavaScript 逻辑所取代。 （警告：除非您提供服务器呈现的非 JS 后备。）