Question

在React app中，我在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>

在React.js中删除侦听器

1 个答案: