取消选中反应中的单选按钮

Question

我认为这是一个非常愚蠢的怀疑,但我陷入了困境.我有多个单选按钮,我想在我点击另一个单选按钮后取消选中所有单选按钮.如何在反应中实现它？

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 onChange={(i)=>this.callOptions(i)}>
                           <label className="radio-inline"><input type="radio" value={i} ref={'ref_' + i} value={item.id}/>{item.nm}</label>
                        </div>
                      )
                  })}

Answer 1

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

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

• 我改变了你的使用方式,refs因为你的方法现在已被弃用并且不鼓励.请看这篇文章.而且,你几乎肯定不需要任何任何refs东西; 请考虑删除它们.

• 您没有将keyprop用于您要映射的项目.我也补充说.请看这篇文章

• 您可能还想阅读有关受控与未受控制的输入.这是我前一段时间发表的另一篇相关文章.

• 你不小心value为你的复选框添加了两个道具.

解决方案

受控

添加每次选择单选按钮时切换的状态变量.就像是:

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输入添加道具.所以喜欢:

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>
   );
 })}

Answer 2

给您一个通用名称属性单选按钮。更改

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

至

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