javascript - 当单击子复选框 <input> 时，React/HTML 取消父 的 onClick

Question

我的问题与 React 代码有关，但答案可能更与 HTML 事件的一般功能而不是 React 相关。

我正在构建一个组件，其中在封闭的 <div> 内进行任何单击应该触发特定的点击处理程序。这很容易实现为 onClick附加到这个“父div”的函数。该组件内部还包含一个复选框。由于该组件的业务规则，我希望没有父 div 的 onClick单击此复选框即可触发。

考虑这个组件的简单实现:

function NaiveComponent() {
  return (
    <div onClick={() => console.log("Clicked parent onClick()")}>
      <label><input type="checkbox" /></label>
      <div> ... </div>
    </div>
  )
} 

我发现有趣的是 onClick当复选框更改时触发两次，否则仅触发一次。我读过的文章表明这​​是由于标签点击传播到输入元素的方式造成的(如 React div container onClick conflicts with checkbox onChange 所建议的)。

我还尝试通过将以下捕获处理程序附加到输入来停止单击事件的传播。它仅停止了对父级 onClick 的调用之一从触发。

onClickCapture={e => e.stopPropagation()}

---

更新

我完全重新设计了该组件，以便复选框不再通过单击处理程序放置在 div 中。首先，这是一个糟糕的 UI 设计。我认为我的点击处理程序问题是由我的应用程序用于样式设置的库层引起的。根据我面临的困难，我应该很明显我所做的事情一开始就是一种代码味道。

感谢所有给出答案的人。

Answer 1

const App = () => {
  const onCheckboxClick = e => {
    e.stopPropagation();
    alert('checkbox clicked');
  }

  return (
    <div onClick={() => alert('div clicked')}>
      This is the parent div
      <label>
        <input type="checkbox" onClick={onCheckboxClick} />
      </label>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

使用e.stopPropagation()似乎可以正常工作。如果这没有帮助，您可以向我们展示更多代码吗？