Question

我动态渲染了一堆嵌套组件，所有嵌套组件都附加到redux操作。

不幸的是，当我点击最内层的元素时，正在调用所有这些动作，我该怎么做才能阻止它在这些情况下冒泡？

示例代码：

  <div onClick={()=>this.props.anAction(elementName)}>{elementName}
      <div onClick={()=>this.props.anAction(innerElementName)}>{innerElementName}
        <div onClick={()=>this.props.anAction(innerInnerElementName)}>    
            {innerInnerElementName}
        </div>
     </div>
  </div>

Answer 1

您可以传递onClick event和trigger stopPropagation()

<div onClick={(e)=>this.props.anAction(innerInnerElementName, e)}>    
   {innerInnerElementName}
</div>

anAction(el, ev) {
  ev.stopPropagation();
  ...
}

如何停止调度redux操作的嵌套组件的事件冒泡？

1 个答案: