我如何停止对 React 中特定元素执行 onClick 事件

Question

我正在使用 Material UI 并且我有一个 TableRow 元素，它具有 onClick 事件。 但现在我必须在表格内添加一个复选框。 该复选框包含在 TableCell 元素中，该元素是 TableRow 的一部分。 现在，当我单击复选框时，它会触发 onClick 事件，这是我不希望发生的。 是否有可能以某种方式停止函数的传播！？ 我可以禁用该特定单元格的 onClick 吗？如果是，是否可以单击复选框？ 或者我应该在函数调用中做一些魔术，如果元素具有某些特定的 ID，例如不被执行？

Answer 1

您可以在复选框单击处理程序中使用e.stopPropagation()以便不触发父元素的单击事件。

function MyCheckbox() {
  function handleClick(e) {
    e.stopPropagation();
    ....
  }

  return (
    <label>
      <input type="checkbox" onClick={handleClick} />
      Click me
    </label>
  );
}