使用 onChange 事件处理单选按钮选择

Posted 2023-02-22

【中文标题】使用 onChange 事件处理单选按钮选择

【英文标题】：Handle radio buttons selection with onChange event

【发布时间】：2022-01-13 03:07:34

【问题描述】：

我有以下代码：

let checkId = -1;

const checkChange= e => 
    checkId = e.target.id;


 data.map(param=> (
    <div className="form-check form-check-inline">
        // paramd is an integer 1, 2, 3... etc. so is storing the desired value properly.
        <input className="form-check-input" type='radio' name='radio' + param.Id id=param.Id value=data.Name onChange=checkChange checked=checkId == param.Id ? true : false />
        <label className="form-check-label" for=param.Id>param.Name</label>
    </div>
))

我要做的是处理选中的属性并只选择一个输入，这样当我检查其他输入时，前一个会松开选中并将单击设置为选中。

【参考方案1】：

我刚刚找到了我的问题的解决方案。我正在正确设置和阅读我的价值观。问题是设置了 checked=true/false 属性。我改变了这个：

<input className="form-check-input" type='radio' name='radio' + param.Id id=param.Id value=data.Name onChange=checkChange checked=checkId == param.Id ? true : false />

到

<input className="form-check-input" type='radio' name='radio' + param.Id id=param.Id value=data.Name onChange=checkChange />

这可以处理我想要的选择/取消选择。如果有人可以分享更多关于为什么 checked=condition 返回 true/false 会很棒的细节。

【参考方案2】：

您必须确保对所有输入使用相同的name。此外，在onChange 处理程序中，您必须在设置新值时使用e.target.value。

const [checkId, setCheckId] = useState(-1)


const checkChange = e => 
    setCheckId(e.target.value)


 data.map((param, paramIdx)=> (
    <div key=paramIdx className='form-check form-check-inline'>
        <input className='form-check-input' type='radio' name='for-something' id=param.Id value=param.Name onChange=checkChange checked=checkId === param.Id />
        <label className='form-check-label' for=param.Id>param.Name</label>
    </div>
))

参考

Radio Button

【讨论】：

我将单选按钮重命名为相同的名称，但这并不能解决我的问题。收音机没有得到检查。

那么问题出在你设置数据的方式上。请您分享文件的完整代码sn-p。您还可以分享数据对象的外观吗？我已经用更新checkId 的不同方式更新了我的答案。请看一下。我也建议使用名为 useState 的反应钩子。虽然不是必需的，但推荐。

是的。 React 使用状态管理来正确地维护对 DOM 的更新。也许进一步阅读official documentation 会有所帮助。

嗯...非常有趣和怪异，就像地狱般的解决方案。我刚刚从我的输入中删除了所有 cheked 属性，现在就像一个魅力。没有其他事情可以处理我需要的取消选择的事情。