如何使用 React 只选择一个单选按钮

Question

我试图通过用它做一个小应用程序来学习 React。我的应用程序有两个单选按钮，我想始终只选中其中一个，但是当我选择另一个按钮时，似乎无法弄清楚如何取消选中另一个按钮。相反，他们都保持选中状态。这是一个jsfiddle：

https://jsfiddle.net/4us5us2o/

这是代码：

var MyRadioButton = React.createClass({
  handleChange: function () {
    this.props.onChange(this.props.myValue)
  },
  render: function () {
    return (
      <input type="radio" onChange={this.handleChange}>{this.props.myValue}</input>
    )
  }
});


var MyApp = React.createClass({
  getInitialState: function () {
    return {
      selectedValue: ''
    }
  },
  changeValue: function (newValue) {
    this.setState({selectedValue: newValue })
  },
  render: function () {
    return (
      <div>
        <MyRadioButton onChange={this.changeValue} myValue="A" />
        <MyRadioButton onChange={this.changeValue} myValue="B" /><br></br>
      </div>
    )
  }
});

Answer 1

您需要在 input 元素上提供 name 属性以将它们标记为同一单选按钮组的一部分。这是具有 radio 类型的<input>元素的标准行为。

在您的示例中，您可以使用：

<input type="radio" name="myGroupName" onChange={this.handleChange}>{this.props.myValue}</input>