Question

我有一个看起来像的组件：

<ParentComponent onClick={this.doSomething}>
  <ChildComponent onClick={this.doSomethingElse} />
</Parent>

如果我点击ChildComponent，doSomethingElse和doSomething都会触发。当子onClick事件触发时，如何取消onClick事件传播的父组件？

Answer 1

您应该将行e.stopPropagation();添加到this.doSomethingElse事件处理程序的顶部。

Event.stopPropagation()

防止当前事件在捕获和冒泡阶段进一步传播。

因此，当您在事件处理程序中使用e.StopPropagation()时，它会阻止事件冒泡到祖先并触发其事件处理程序。

确保将e作为this.doSomethingElse方法的参数。

doSomethingElse( e ) {
  e.stopPropagation();
  // ... do stuff
}

Answer 2

如果您希望避免重复事件，请使用stopPropagation功能。

＆＃13;

class App extends React.Component {
  
  firstHandle = () => {
    console.log('parent');
  }
  
  secondHandle = (e) => {
    e.stopPropagation();
    console.log('child');
  }
  
  render() {
    return (
      <div onClick={this.firstHandle}>
        Parent
        <div onClick={this.secondHandle}>child</div>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById("react")
);

＆＃13;

<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>
<div id="react"></div>

＆＃13;

在React中取消子组件中父组件的onClick事件

2 个答案: