51

React.js でバブリングとキャプチャを処理する例を探しています。JavaScript で 1 つ見つけましたが、React.js に相当するものを見つけるのに苦労しています。

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

4

1 に答える 1

117

バブリングとキャプチャーはどちらも、ハンドラーをアタッチする方法を除いて、DOM 仕様で説明されているのと同じ方法で React によってサポートされています。

バブリングは、通常の DOM API と同じくらい簡単です。stopPropagation要素の最終的な親にハンドラーをアタッチするだけで、その要素でトリガーされたイベントは、途中で停止されない限り、親にバブリングされます。

<div onClick={this.handleClick}>
  <button>Click me, and my parent's `onClick` will fire!</button>
</div>

ドキュメント では簡単にしか言及されていませんが、キャプチャも同様に簡単です。Captureイベント ハンドラーのプロパティ名に追加するだけです。たとえば、次のようonClickになりonClickCaptureます。

<div onClickCapture={this.handleClickViaCapturing}>
  <button onClick={this.handleClick}>
    Click me, and my parent's `onClickCapture` will fire *first*!
  </button>
</div>

この場合、イベントをhandleClickViaCapturing呼び出すstopPropagationと、ボタンのonClickハンドラーは呼び出されません。

この JSBinstopPropagationは、Reactでのキャプチャ、バブリング、および動作を示す必要があります: https://jsbin.com/hilome/edit?js,output

于 2015-12-30T05:55:25.067 に答える