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

Question

我正在尝试通过使用 React 开发一个小应用程序来学习它。我的应用程序有两个单选按钮，我想始终只选中其中一个，但当我 select 另一个按钮时，似乎无法弄清楚如何取消选中另一个按钮。相反，他们都保持 selected。这是它的 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> 元素类型为 radio.

的标准行为

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

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

Answer 2

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

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

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

Answer 3

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

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

我会给你一个工作示例，两个单选按钮控制值在 true/false.

之间

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

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

How to keep only one radio button selected with React

radio-button

reactjs