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

【问题标题】：How to keep only one radio button selected with React如何使用 React 只选择一个单选按钮
【发布时间】：2015-08-30 03:20:39
【问题描述】：

我正在尝试通过用它做一个小应用程序来学习 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>
    )
  }
});

【问题讨论】：

标签： radio-button reactjs

【解决方案1】：

添加属性checked 并在那里进行比较。

例如：checked={this.state.myValue === true}

我会给你一个工作示例，两个单选按钮控制true/false之间的值。

https://jsfiddle.net/4hs7v5qb/1/

【讨论】：

这是实现解决方案的最简单方法。

【解决方案2】：

只是调整乍得的答案，以防万一有人遇到这个问题。

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

不要向输入元素添加任何子元素，因为 React 会抛出错误。只需在其旁边使用跨度或标签即可显示文本。

【讨论】：

【解决方案3】：

您需要在输入元素上提供名称属性，以将它们标记为同一个单选按钮组的一部分。这是具有无线电类型的 <input> 元素的标准行为。

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

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

【讨论】：