イベントハンドラの伝播を防ぐ方法について(React)

イベントハンドラの伝播

下のコードでは<div>の中に<button>があります。
どちらのタグにもonClickハンドラーを記述しています。
ボタンをクリックすると、

1. ボタンの onClick が呼び出されます。
2. div の onClick が呼び出されます。
   子コンポーネントのイベントが親コンポーネントにも到達しています。これをイベントハンドラの伝播と言います。 *onScrollを除いて全てのイベントは伝播します。

どうやってイベントハンドラーの伝播を止めるか

イベントハンドラは唯一の引数としてイベントオブジェクトを受け取ります。
通常eと書きます。このオブジェクトを使用してイベントに関する情報を読み取ることができます。

このイベントオブジェクトを使用すると伝播を停止することもできます。
イベントが親コンポーネントに到達するのを防ぎたい場合は
e.stopPropagation()を呼び出す必要があります。

ボタンを押すと

1. Button コンポーネントのハンドラーを呼び出す
2. まず最初にe.stopPropagation()イベントが親コンポーネントに伝播しないように止めています。
3. 次に onClick()Props が呼び出されて実行されて、画面にアラートが出ます。

意図的に親コンポーネントのイベントを先に呼び出したい時

Captureをつけることで先に div のイベントハンドラーが呼び出されるようになります。
順番としては、

1. 下に移動し、すべての onClickCapture ハンドラーを呼び出します。
2. クリックされた要素の onClick ハンドラを実行します。
3. 上向きに移動し、すべての onClick ハンドラを呼び出します。

<div
  onClickCapture={() => {
    /* this runs first */
  }}
>
  <button onClick={(e) => e.stopPropagation()} />
  <button onClick={(e) => e.stopPropagation()} />
</div>