为您的单选按钮提供一个通用名称属性。改变

<input type="radio" value={i} ref={'ref_' + i} value={item.id}/>

到

<input type="radio" value={i} name="abc" ref={'ref_' + i} value={item.id}/>

您可以使用受控输入或非受控输入。下面是每个解决方案的示例。

在我发布之前，请允许我为您添加一些有用的提示和链接：

• 我已经改变了您的使用方式，refs因为您的方法现在已被弃用和不鼓励使用。请看这篇文章。此外，您几乎可以肯定refs这里不需要任何东西；请考虑删除它们。

• 您没有将keyprops用于您正在映射的项目。我也加了。请看这个帖子

• 您可能还需要阅读有关控制VS不受控制的投入。这是我不久前发表的另一篇相关帖子。

• 您不小心value为复选框添加了两个props。

解决方案

受控

添加一个状态变量，每次选择单选按钮时都会切换该变量。就像是：

constructor() {
  super();
  this.state = {checkedRadio: null};
}

changeRadio(e) {
  this.setState(checkedRadio: e.target.value);
}

var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don't call again"},{id:5,nm:"Call later"}];

{options.map((item,i) => {
  return (
    <div key={item.id} onChange={(i)=>this.callOptions(i)}>
      <label className="radio-inline"><input type="radio" checked={this.state.checkedRadio == i} ref={(el) => this["myRadioRef" + i] = el} value={item.id} onChange={this.changeRadio} />{item.nm}</label>
    </div>
   );
 })}

不受控制

另一种选择是使用不受控制的输入。您需要对现有代码做的就是name向您的输入添加一个props。所以像：

var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don't call again"},{id:5,nm:"Call later"}];

{options.map((item,i) => {
  return (
    <div key={item.id} onChange={(i)=>this.callOptions(i)}>
      <label className="radio-inline"><input type="radio" name="myRadio" ref={(el) => this["myRadioRef" + i] = el} value={item.id} onChange={this.changeRadio} />{item.nm}</label>
    </div>
   );
 })}

另外，对于无状态组件，如果要取消选择单选项，还可以使用checked属性：

const renderRadioGroup = data.map((radio, i) => {
    return (
        <span key={i}>
            <input
                className={radio.class}
                id={radio.id}
                type="radio"
                name={radio.value}
                value={radio.value}
                onChange={e => {
                    onChange(e, itemKey);
                }}
                checked={defaultChecked === radio.value}
            />
            <label htmlFor={radio.id}>{radio.label}</label>
        </span>
    );
}

在这种情况下，defaultChecked作为props传递并用作类中的变量。

我正在尝试使用bootstrap进行react，但我遇到了同样的问题。您可以做的是使用 e.target.checked 检查单选按钮是否被单击，然后使用 state 中设置的选中值的先前状态再次检查。

例如， 这是渲染方法中的内容

<input checked={this.state.radioButton} onClick={this.onClickAvailability} className="form-check-input" type="radio" value="Click" />
<label>Click</label>

在事件处理程序中

onClickAvailability(e){

            if(e.target.checked && !this.state.radioButton){
                this.setState({
                    radioButton:true,
                })
            }else if(e.target.checked && this.state.radioButton){
                this.setState({
                    radioButton:false,
                })

     }

请记住在 componentDidMount 或构造函数中将初始值设置为 false