复选框上的 onChange 不会在反应中触发

Question

好的，在决定发布这个问题之前，我搜索了很多东西并尝试了很多东西，所以这就是我遇到的情况

<div className="btn-group" data-toggle="buttons">
 <label htmlFor="test" className="btn win-checkbox-btn" onClick={e => e.stopPropagation()}>
  <input id="test" autoComplete="off" className="taggable" type="checkbox" name="test" onChange={(e) => { console.log(e) }} />
 someText
 </label>
 <input autoComplete="off" className="taggable" type="checkbox" name="test2" onChange={(e) => { console.log(e) }} />
</div>

所以这里发生的情况是第一个复选框（标签内名称为 test 的那个）上的 onChange 函数根本不会触发，但第二个复选框（test2）上的 onChange 函数会正常触发。我需要在标签内使用它，因为我使用的是 Bootstrap checkbox buttons 。所以我使用引导程序 3.3.7 并做出反应 15.6.0 。 更多信息是，在标签上使用 htmlFor 属性或将其删除不会影响任何事情，而我在标签上使用的 onClick 处理程序位于我在搜索时找到的解决方案中，但也没有任何帮助删除或添加它不会影响任何内容。

这里的任何线索都会有很大帮助，在此先感谢。

Answer 1

您的复选框不应位于标签标签内，因为标签标签会处理代码中的点击事件。您是否需要标签上的所有 onclick 事件“onClick={e => e.stopPropagation()}”？

您可以尝试以下代码： <label htmlFor="test" >someText </label> <input id="test" autoComplete="off" type="checkbox" name="test" onChange={(e) => { console.log(e) }} />