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

Posted 2023-03-05

【中文标题】取消选中反应中的单选按钮

【英文标题】：Uncheck radio buttons in react

【发布时间】：2017-11-03 04:48:09

【问题描述】：

我认为这是一个非常愚蠢的怀疑，但我被困在这个...... 我有多个单选按钮，我想在单击另一个单选按钮后立即取消选中所有单选按钮。 我怎样才能在反应中实现它？

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

【问题讨论】：

你是说点击某个按钮应该取消选择所有按钮或除选定按钮之外的所有按钮？

请看看我更新的答案。我已经为你完成的其他一些失误添加了详细信息。

【参考方案1】：

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

例如 这就是 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

【参考方案2】：

另外，对于无状态组件，如果要取消选中单选项，也可以使用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 作为道具传递并用作类中的变量。

【参考方案3】：

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

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

我改变了您使用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>
   );
 )

【讨论】：

我正在尝试使用 2 个单选按钮将“不受控制”的解决方案适应我的简单表单。 “this.changeRadio”函数有什么作用？我在你的例子中没有看到它。有没有办法让我避免使用“onChange”而只使用我表单的“onSubmit”来获取所选按钮的当前值？谢谢！

@MariannaS。首先，我不鼓励使用不受控制的解决方案。话虽如此，您不需要 this.changeRadio 方法，因为使用不受控制的解决方案，您不会让 React 在内部知道任何输入更改；浏览器对此负全责。所以你根本不需要onChange 监听器。如果您有一个表单元素，您确实可以向它添加一个onSubmit 侦听器并从那里获取它。您可能需要在侦听器的回调中使用 e.preventDefault() 以防止出现不需要的行为。祝你好运。

谢谢@Chris。是的，这就是我正在做的事情，但它对我不起作用，因为我得到了两个值（来自 2 个单选按钮），而不仅仅是选定的一个。然后我发现了这个article，建议将“ref”应用于

【参考方案4】：

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

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

到

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