React.jsでのバブリングとキャプチャの処理の例を探しています。 JavaScriptを使用するもの が見つかりましたが、React.jsに相当するものを見つけることができません。
React.jsでバブリングとキャプチャの例を作成するにはどうすればよいですか?
バブリングとキャプチャは両方ともReactによってサポートされます。ただし、ハンドラーのアタッチ方法を除き、DOM仕様で説明されている方法と同じです。
バブリングは、通常のDOM APIと同じくらい簡単です。ハンドラを要素の最終的な親にアタッチするだけで、その要素でトリガーされたイベントは、途中でstopPropagation
を介して停止されない限り、親にバブルします。
<div onClick={this.handleClick}>
<button>Click me, and my parent's `onClick` will fire!</button>
</div>
ドキュメントで簡単にしか説明していません ですが、キャプチャも同じくらい簡単です。イベントハンドラのプロパティ名にCapture
を追加するだけです。
<div onClickCapture={this.handleClickViaCapturing}>
<button onClick={this.handleClick}>
Click me, and my parent's `onClickCapture` will fire *first*!
</button>
</div>
この場合、handleClickViaCapturing
がイベントでstopPropagation
を呼び出すと、ボタンのonClick
ハンドラーは呼び出されません。
このJSBin は、キャプチャ、バブリング、およびstopPropagation
がReactでどのように機能するかを示す必要があります。 https://jsbin.com/hilome/edit?js,output