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

Question

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

我在vanilla HTML和CSS中使用它，但是当我在React中尝试这个时，单击标签不会做任何事情。 ONLY 如果我取消隐藏复选框，我可以点击复选框，并且能够看到标签样式。我想隐藏复选框。

有没有人知道如何隐藏复选框，仍然可以点击ReactJS中的标签？

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

Answer 1

使用htmlFor代替for做出反应（请参阅反应supported attributes）：

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

Answer 2

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