单击标签不会单击 React 中的复选框？

Posted 2023-03-05

【中文标题】单击标签不会单击 React 中的复选框？

【英文标题】：clicking label doesn't click checkbox in React?

【发布时间】：2016-12-14 19:24:31

【问题描述】：

我创建了一个表单，用户可以在其中选择选项，然后再提交表单。我用display: none 隐藏复选框并设置<label> 的样式，以便当用户单击标签时它会触发复选框。

我已经让它在普通的 html 和 CSS 中工作，但是当我在 React 中尝试这个时，单击标签不会做任何事情。 只有 如果我取消隐藏复选框，我可以单击该复选框并能够看到标签样式。我想隐藏复选框。

有谁知道如何隐藏复选框并且仍然可以在 ReactJS 中单击标签？

这是我尝试在 ReactJS 中构建的 codepen。

【参考方案1】：

在反应中使用htmlFor 而不是for（参见反应supported attributes）：

<input type="checkbox" id="check3"/> Fish
<label htmlFor="check3"><span class="fa fa-check"/></label>

【参考方案2】：

如前所述 - 使用 htmlFor，然后尝试在 label 而不是 input 上添加 onClick 事件。这将在输入本身上添加/删除 checked 属性。我假设您已经在输入中使用了defaultChecked 属性。