解决方案

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

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

在发布之前，请允许我添加一些有用的提示＆amp;给你的链接：

我改变了您使用refs的方式，因为您的方法现已弃用并且不鼓励。请参阅this post。此外，你几乎肯定不需要任何refs在这里;请考虑删除它们。
您未对key道具使用您要映射的项目。我也补充说。请参阅this post
您可能还想阅读有关controlled与uncontrolled输入的内容。这是我之前提出的另一个relevant post。
您不小心为您的复选框添加了两个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}/>

Answer 3

此外，对于无状态组件，如果要取消选择广播项，还可以使用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作为道具传递并用作班级中的变量。

Answer 4

我在尝试与 bootstrap 反应时遇到了同样的问题。您可以做的是使用e.target.checked检查单选按钮是否被单击，然后在状态为checked set的先前状态下再次检查它。

例如这就是render方法中的内容

<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

在

4 个答案:

解决方案