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

Posted 2021-04-14

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

答案

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

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

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

另一答案

只是调整了Chad的答案，万一有人遇到这个问题。

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

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