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

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
}