web-dev-qa-db-ja.com

React.jsでのバブリングとキャプチャの例

React.jsでのバブリングとキャプチャの処理の例を探しています。 JavaScriptを使用するもの が見つかりましたが、React.jsに相当するものを見つけることができません。

React.jsでバブリングとキャプチャの例を作成するにはどうすればよいですか？

javascriptreactjsevent-bubblingevent-capturing
28
Socrates

バブリングとキャプチャは両方とも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

69
Michelle Tilley