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后备。）

用于改变状态的单选按钮选择

1 个答案: