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

Posted 2023-03-05

【中文标题】如何使用 React 只选择一个单选按钮

【英文标题】：How to keep only one radio button selected with 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>
    )
  
);

【参考方案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>