javascript - 在 React.js 中删除监听器

Question

在 React 应用程序中，我在 Header (handleToggle) 上有 onClick 监听器。 Header 有 4 个元素，最后一个元素是 Edit with own onClick listener (edit)。 如何从 Edit 元素中删除应用于 Header (handleToggle) 的监听器并仅保留他自己的监听器(编辑)？

<div className="heading-panel" onClick={e => this.handleToggle(e)}>
  <h5>Name</h5>
  <h5>lastName</h5>
  <h5>Number</h5>
  <a onClick={() => this.edit()}>Edit</a>
</div>

Answer 1

您告诉编辑点击处理程序停止事件传播。

<a onClick={e => { e.stopPropagation(); return this.edit();}>Edit</a>

这是在匿名处理程序中完成的，但您可以将事件对象传递给 this.edit 并让它执行:

<a onClick={e => this.edit(e)}>Edit</a>

然后

edit(e) {
    e.stopPropagation();
    // ...
}

实例:

class Example extends React.Component {
  edit(e) {
    if (this.props.stop) {
      e.stopPropagation();
    }
    console.log("edit");
  }
  handleToggle() {
    console.log("handleToggle");
  }
  render() {
    return <div className="heading-panel" onClick={e => this.handleToggle(e)}>
      <h5>Name</h5>
      <h5>lastName</h5>
      <h5>Number</h5>
      <a onClick={e => this.edit(e)}>Edit</a>
    </div>;
  }
}

ReactDOM.render(
  <div>
    <div>Doesn't Stop:</div>
    <Example stop={false} />
    <div>Stops:</div>
    <Example stop={true} />
  </div>,
  document.getElementById("root")
);

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