ネストされたコンポーネントの束を動的にレンダリングします。これらはすべて、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>
あなたには渡すことができますonClick eventし、trigger stopPropagation()
<div onClick={(e)=>this.props.anAction(innerInnerElementName, e)}>
{innerInnerElementName}
</div>
anAction(el, ev) {
ev.stopPropagation();
...
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加