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

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

原文由 Saif Ali Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

至

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

原文由 Suresh Prajapati 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

• 您没有为要映射的项目使用 key 道具。我也已经添加了。请看 这篇文章

• 您可能还想阅读有关 受控 与 非受控 输入的信息。这是我不久前发表的另一篇 相关文章。

• 您不小心为您的复选框添加了两个 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>
   );
 })}

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议