Reactのイベントバブリングを徹底解説：効果的な制御方法と応用例

React開発において、イベント処理はユーザーインタラクションを管理する重要な要素です。その中でも「イベントバブリング」は、多くの開発者が直面する仕組みの一つです。クリックやスクロールなどのイベントが、子コンポーネントから親コンポーネントへ伝播する現象を指し、適切に制御しないと意図しない動作を引き起こす可能性があります。本記事では、イベントバブリングの仕組みを理解し、Reactでの具体的な制御方法やベストプラクティス、さらには応用例や実践的な演習問題を通じて、効率的なイベント管理を学びます。

イベントバブリングとは

イベントバブリングとは、ウェブアプリケーションのイベント処理において、子要素で発生したイベントが親要素へと順次伝播していく現象を指します。この仕組みは、DOMイベントの標準動作の一部として定義されています。例えば、クリックイベントが発生した場合、そのイベントは最初にクリックされた要素で処理され、次にその親要素、そのまた親要素という順に伝播していきます。

イベントバブリングの仕組み

イベントは以下の3つのフェーズで処理されます：

キャプチャリングフェーズ
イベントがルート要素からターゲット要素へと降りていく過程です。
ターゲットフェーズ
イベントが実際にターゲット要素で発生する段階です。
バブリングフェーズ
イベントがターゲット要素から親要素へと遡っていく過程です。

バブリングフェーズでは、ターゲットで発生したイベントが親要素、さらにその親要素へと伝播していきます。

日常的な例

ショッピングサイトの検索ボタンを例に考えてみます。検索ボタンをクリックすると、

子要素のクリックイベントが発生します。
このイベントはボタンの親である検索バー全体、さらに外枠のコンテナ要素にも伝播します。

適切に制御しない場合、クリックイベントが不要な要素にまで伝播し、意図しない動作が発生することがあります。

なぜイベントバブリングが重要なのか

イベントバブリングは便利な場合もありますが、適切に理解して制御することが重要です。特にReactのようなコンポーネントベースのフレームワークでは、親子コンポーネント間のイベント伝播がパフォーマンスや機能性に大きく影響します。React独自のイベントシステムを活用することで、この仕組みを効率的に利用できます。

Reactにおけるイベントバブリングの特徴

Reactでは、イベントバブリングが通常のDOMとは異なる方法で処理されます。これは、Reactが独自のイベントシステム「SyntheticEvent」を使用しているためです。このセクションでは、Reactにおけるイベントバブリングの独自の挙動とその特徴について解説します。

SyntheticEventとは

ReactのSyntheticEventは、ブラウザ間の互換性を確保するために設計されたクロスブラウザなイベントラッパーです。これは、ネイティブのDOMイベントを抽象化しており、次のような利点があります：

一貫したAPI
ネイティブイベントの動作がブラウザによって異なる場合でも、SyntheticEventを使用すると統一されたインターフェースでイベントを処理できます。
自動的なクリーンアップ
SyntheticEventはイベント処理後に再利用されるため、メモリ消費を抑えることができます（ただし、非同期処理で使用する場合は注意が必要です）。

Reactにおけるイベントバブリングの挙動

Reactでは、イベントがネイティブDOMイベントと同様にバブリングします。ただし、SyntheticEventを介して処理されるため、次の特徴があります：

バブリングがReactツリーに限定される
イベントバブリングはReactコンポーネントの範囲内で処理されます。React外部のDOM要素に対しては影響しません。
ネイティブイベントへのアクセスも可能
SyntheticEventのnativeEventプロパティを使用することで、元のネイティブDOMイベントにアクセスすることができます。

例: Reactでのバブリング挙動

以下は、Reactコンポーネント内でのバブリングの挙動を示す例です：

function App() {
  function handleParentClick() {
    console.log("親要素でクリックイベントを処理しました");
  }

  function handleChildClick(event) {
    console.log("子要素でクリックイベントを処理しました");
    // イベントの伝播を停止
    event.stopPropagation();
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>クリック</button>
    </div>
  );
}

この例では、子要素（ボタン）のクリックイベントでstopPropagationを使用することで、親要素へのバブリングが停止されます。

Reactのイベントバブリングを理解する重要性

Reactのイベントシステムを理解することで、効率的なイベント管理が可能になります。例えば、親コンポーネントで一括してイベントを処理する場合や、子コンポーネントのイベントが親に影響を与えないよう制御する場合に、この仕組みが役立ちます。

イベントの伝播を制御する方法

イベントバブリングを適切に制御することで、不要なイベント伝播を防ぎ、意図した動作を実現できます。このセクションでは、Reactでイベントの伝播を制御する具体的な方法について説明します。

`stopPropagation`による伝播の停止

stopPropagationは、イベントが親要素に伝播するのを防ぐために使用されます。これを使うことで、特定の要素でイベントを処理し、それ以上の伝播を防止できます。

以下はその使用例です：

function App() {
  function handleParentClick() {
    console.log("親要素でクリックイベントが発生しました");
  }

  function handleChildClick(event) {
    event.stopPropagation(); // 親要素への伝播を停止
    console.log("子要素でクリックイベントが発生しました");
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>クリック</button>
    </div>
  );
}

このコードでは、ボタンをクリックしても親要素のhandleParentClickは呼び出されません。

`preventDefault`によるデフォルト動作の抑止

preventDefaultは、ブラウザのデフォルト動作（例：フォームの送信やリンクの遷移）を抑止するために使用されます。

以下の例は、リンククリック時の遷移を抑止する方法を示しています：

function App() {
  function handleLinkClick(event) {
    event.preventDefault(); // デフォルトのリンク遷移を防止
    console.log("リンクがクリックされましたが、遷移は行われません");
  }

  return <a href="https://example.com" onClick={handleLinkClick}>リンク</a>;
}

このコードでは、リンクをクリックしてもhttps://example.comに遷移しません。

キャプチャリングフェーズの利用

通常、Reactではイベントはバブリングフェーズで処理されますが、キャプチャリングフェーズでイベントを処理することも可能です。これを行うには、イベントリスナーにcaptureプロパティを設定します。

function App() {
  function handleClickCapture() {
    console.log("キャプチャリングフェーズでイベントが発生しました");
  }

  function handleClickBubble() {
    console.log("バブリングフェーズでイベントが発生しました");
  }

  return (
    <div onClickCapture={handleClickCapture} onClick={handleClickBubble}>
      <button>クリック</button>
    </div>
  );
}

この例では、キャプチャリングフェーズでhandleClickCaptureが先に呼び出され、その後にバブリングフェーズでhandleClickBubbleが呼び出されます。

適切な制御を行うためのポイント

イベントの制御は必要最小限に留め、コードの可読性を確保する。
必要に応じてstopPropagationやpreventDefaultを使用し、意図した動作を実現する。
複雑なイベント伝播が必要な場合、キャプチャリングフェーズを活用する。

これらの方法を使い分けることで、Reactアプリケーション内で効率的なイベント処理が可能になります。

親コンポーネントでのイベント処理

Reactでは、イベントバブリングを活用して、親コンポーネントで子コンポーネントのイベントを一括して処理することが可能です。これにより、コードの管理がシンプルになり、柔軟性が向上します。このセクションでは、親コンポーネントでのイベント処理の方法と注意点について説明します。

親コンポーネントでのイベントハンドリングの基本

親コンポーネントでイベントを処理するには、親要素にイベントリスナーを設定します。以下は、その基本例です：

function ParentComponent() {
  function handleParentClick(event) {
    console.log("親コンポーネントでイベントを処理しました");
    console.log("クリックされた要素:", event.target);
  }

  return (
    <div onClick={handleParentClick}>
      <button>ボタン1</button>
      <button>ボタン2</button>
    </div>
  );
}

この例では、親の<div>にクリックイベントハンドラーを設定しています。子のボタンがクリックされた場合も、イベントは親に伝播し、handleParentClickが呼び出されます。

バブリングを利用した柔軟なイベント処理

イベントバブリングを利用することで、親コンポーネントが複数の子コンポーネントからのイベントをまとめて処理できます。たとえば、クリックされた要素を判定して適切な処理を行うことが可能です：

function ParentComponent() {
  function handleParentClick(event) {
    if (event.target.tagName === "BUTTON") {
      console.log("ボタンがクリックされました:", event.target.textContent);
    }
  }

  return (
    <div onClick={handleParentClick}>
      <button>ボタン1</button>
      <button>ボタン2</button>
    </div>
  );
}

このコードでは、クリックされた要素がボタンかどうかを判定してから処理を行っています。これにより、複数の子要素のイベントを効率的に処理できます。

特定の子要素に対するイベントの制御

特定の子要素でイベントを処理したい場合は、イベントの伝播を停止する方法を活用できます：

function ParentComponent() {
  function handleParentClick() {
    console.log("親コンポーネントでイベントを処理しました");
  }

  function handleChildClick(event) {
    event.stopPropagation();
    console.log("特定の子要素でイベントを処理しました");
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>子要素1</button>
      <button>子要素2</button>
    </div>
  );
}

この例では、子要素1のクリックイベントが親に伝播しないよう制御しています。

注意点

親コンポーネントでのイベント処理は便利ですが、複雑なロジックを組み込むとコードが読みにくくなります。
子要素でのstopPropagationの多用は避け、イベント伝播の仕組みを最大限活用するように設計しましょう。
状態管理が複雑になる場合は、状態管理ライブラリ（例：ReduxやContext API）を併用することを検討してください。

親コンポーネントでのイベント処理を適切に活用することで、Reactアプリケーションの構造をよりシンプルに保つことができます。

子コンポーネントでのイベント処理の工夫

子コンポーネントでのイベント処理は、細かな制御が可能になる反面、イベント伝播や状態管理を慎重に設計する必要があります。このセクションでは、子コンポーネントでのイベント処理方法と、効率的な管理のための工夫を解説します。

子コンポーネントでのイベント処理の基本

子コンポーネントに直接イベントリスナーを設定し、イベントを独自に処理することができます。以下はその基本例です：

function ChildComponent({ onButtonClick }) {
  function handleClick() {
    console.log("子コンポーネントでクリックイベントを処理しました");
    onButtonClick(); // 親コンポーネントへの通知
  }

  return <button onClick={handleClick}>クリック</button>;
}

function ParentComponent() {
  function handleParentNotification() {
    console.log("親コンポーネントに通知されました");
  }

  return <ChildComponent onButtonClick={handleParentNotification} />;
}

この例では、子コンポーネントのクリックイベントを処理し、その結果を親コンポーネントに通知しています。

子コンポーネントでのイベント制御

子コンポーネントでイベント伝播を制御するには、stopPropagationやpreventDefaultを適切に利用します。

function ChildComponent() {
  function handleClick(event) {
    event.stopPropagation(); // 親要素への伝播を停止
    console.log("子コンポーネントでのみイベントを処理しました");
  }

  return <button onClick={handleClick}>クリック</button>;
}

function ParentComponent() {
  function handleParentClick() {
    console.log("親コンポーネントのクリックイベント");
  }

  return (
    <div onClick={handleParentClick}>
      <ChildComponent />
    </div>
  );
}

このコードでは、子コンポーネントのクリックイベントが親に伝播しないようにしています。

コンポーネント間でのイベント伝播の管理

Reactでコンポーネント間のイベントを適切に管理するには、以下のポイントを押さえる必要があります：

明確な責務分担
子コンポーネントは基本的に自分の役割に関するイベントのみを処理し、それ以外の処理は親に委譲します。
イベントリスナーの最小化
子コンポーネントでのイベントリスナーは、必要最低限に留めて冗長な処理を防ぎます。
コールバック関数の利用
親からコールバック関数を渡すことで、子から親へのデータ送信や通知を行います。

例: 複数の子コンポーネントのイベント管理

function ChildComponent({ id, onNotify }) {
  function handleClick() {
    onNotify(id); // 親コンポーネントにIDを通知
  }

  return <button onClick={handleClick}>ボタン{id}</button>;
}

function ParentComponent() {
  function handleNotification(id) {
    console.log(`ボタン${id}がクリックされました`);
  }

  return (
    <div>
      <ChildComponent id={1} onNotify={handleNotification} />
      <ChildComponent id={2} onNotify={handleNotification} />
    </div>
  );
}

この例では、複数の子コンポーネントが親コンポーネントに自分のIDを通知する仕組みを実現しています。

注意点

子コンポーネントで複雑なロジックを持たせすぎないようにし、親との責務分担を明確にしましょう。
状態やイベントの処理が煩雑になる場合は、Context APIやuseReducerを使用して状態管理を整理しましょう。
子コンポーネントでのstopPropagationの多用は、意図しないバグを引き起こす可能性があるため慎重に使用しましょう。

子コンポーネントでのイベント処理は、適切な設計と工夫を施すことで、Reactアプリケーションの柔軟性と拡張性を高めることができます。

制御のベストプラクティス

Reactでイベントバブリングを効率的に制御するためには、特定の技術やパターンを使用することが効果的です。このセクションでは、イベントの制御におけるベストプラクティスを紹介します。

1. 必要最低限のイベントリスナーを設定する

Reactでは、親コンポーネントでまとめてイベントを処理することが推奨される場面が多いです。これにより、冗長なイベントリスナーを防ぎ、パフォーマンスの向上につながります。

例：

function App() {
  function handleEvent(event) {
    console.log("クリックされた要素:", event.target.textContent);
  }

  return (
    <div onClick={handleEvent}>
      <button>ボタン1</button>
      <button>ボタン2</button>
    </div>
  );
}

親の<div>にイベントリスナーを設定することで、すべてのボタンのクリックを一括管理できます。

2. コールバック関数で親子間の連携を強化する

親コンポーネントで処理する内容を柔軟に変更できるように、子コンポーネントからコールバック関数を渡します。これにより、子から親への通知を簡単に実現できます。

例：

function Child({ onClick }) {
  return <button onClick={() => onClick("ボタンがクリックされました")}>クリック</button>;
}

function Parent() {
  function handleNotification(message) {
    console.log(message);
  }

  return <Child onClick={handleNotification} />;
}

このパターンは、子コンポーネントの責務を限定し、再利用性を高めます。

3. `stopPropagation`と`preventDefault`を適切に使う

stopPropagationとpreventDefaultを無計画に使用すると、イベントフローが混乱する可能性があります。必要な場面でのみ使用し、コードを明確に記述することが重要です。

例：

stopPropagationを使うべき場面
子要素でのイベントが親要素に影響を与えたくない場合。
preventDefaultを使うべき場面
ブラウザのデフォルト動作を抑止したい場合。

function App() {
  function handleClick(event) {
    event.stopPropagation();
    console.log("イベント伝播を停止しました");
  }

  return (
    <div onClick={() => console.log("親でイベント処理")}>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

4. キャプチャリングフェーズを活用する

通常のバブリングフェーズに加えて、キャプチャリングフェーズを活用することで、イベントの処理順序を柔軟に制御できます。

例：

function App() {
  function handleCapture() {
    console.log("キャプチャリングフェーズで処理");
  }

  function handleBubble() {
    console.log("バブリングフェーズで処理");
  }

  return (
    <div onClickCapture={handleCapture} onClick={handleBubble}>
      <button>クリック</button>
    </div>
  );
}

このコードでは、キャプチャリングフェーズの処理が先に実行されます。

5. カスタムフックでイベント制御を簡略化する

カスタムフックを利用して、イベント管理ロジックを分離し、コードの再利用性を向上させることができます。

例：

import { useCallback } from "react";

function useButtonClick(callback) {
  return useCallback((event) => {
    event.stopPropagation();
    callback(event);
  }, [callback]);
}

function Button({ onClick }) {
  const handleClick = useButtonClick(onClick);

  return <button onClick={handleClick}>クリック</button>;
}

function App() {
  function handleButtonClick(event) {
    console.log("カスタムフックで処理:", event.target.textContent);
  }

  return <Button onClick={handleButtonClick} />;
}

6. 状態管理ツールと組み合わせて管理を最適化する

イベント管理が複雑になる場合は、Context APIやReduxを利用して状態とイベント処理を統一することで、スケーラビリティを向上させます。

これらのベストプラクティスを活用することで、Reactアプリケーションにおけるイベントバブリング制御を効果的に行い、メンテナンス性を高めることができます。

応用例：複数コンポーネントでのイベント処理

Reactアプリケーションでは、複数のコンポーネント間でイベントを連携させることで、より高度なユーザーインタラクションを実現できます。このセクションでは、複数のコンポーネント間でイベントを管理し、連携するための応用例を紹介します。

例1: 親コンポーネントでの一括管理

複数の子コンポーネントがあり、それぞれのクリックイベントを親コンポーネントで一元管理する例を示します。

function Child({ id, onClick }) {
  return <button onClick={() => onClick(id)}>ボタン{id}</button>;
}

function Parent() {
  function handleChildClick(id) {
    console.log(`ボタン${id}がクリックされました`);
  }

  return (
    <div>
      <Child id={1} onClick={handleChildClick} />
      <Child id={2} onClick={handleChildClick} />
      <Child id={3} onClick={handleChildClick} />
    </div>
  );
}

この例では、クリックされたボタンのidを親コンポーネントに通知し、一元的に処理を管理しています。

例2: 子コンポーネント間での状態共有

子コンポーネント間でイベントや状態を共有する場合、親コンポーネントで状態を管理し、それを子コンポーネントにプロパティとして渡します。

function Child({ id, selected, onSelect }) {
  return (
    <button
      style={{ backgroundColor: selected ? "lightblue" : "white" }}
      onClick={() => onSelect(id)}
    >
      ボタン{id}
    </button>
  );
}

function Parent() {
  const [selectedId, setSelectedId] = React.useState(null);

  function handleSelect(id) {
    setSelectedId(id);
  }

  return (
    <div>
      <Child id={1} selected={selectedId === 1} onSelect={handleSelect} />
      <Child id={2} selected={selectedId === 2} onSelect={handleSelect} />
      <Child id={3} selected={selectedId === 3} onSelect={handleSelect} />
    </div>
  );
}

この例では、クリックされたボタンをハイライト表示することで、選択状態を示しています。

例3: コンテキストAPIを利用したイベント管理

Context APIを使用して、親子間のプロパティ受け渡しを簡略化し、複数の子コンポーネントで状態を共有します。

const SelectionContext = React.createContext();

function Child({ id }) {
  const { selectedId, setSelectedId } = React.useContext(SelectionContext);

  return (
    <button
      style={{ backgroundColor: selectedId === id ? "lightblue" : "white" }}
      onClick={() => setSelectedId(id)}
    >
      ボタン{id}
    </button>
  );
}

function Parent() {
  const [selectedId, setSelectedId] = React.useState(null);

  return (
    <SelectionContext.Provider value={{ selectedId, setSelectedId }}>
      <Child id={1} />
      <Child id={2} />
      <Child id={3} />
    </SelectionContext.Provider>
  );
}

このコードでは、Context APIを利用して選択状態を全ての子コンポーネントに簡単に共有しています。

例4: ドラッグ＆ドロップイベントの管理

複数のコンポーネント間でのドラッグ＆ドロップ操作を実装します。

function DraggableItem({ id, onDrop }) {
  function handleDragStart(event) {
    event.dataTransfer.setData("text/plain", id);
  }

  function handleDrop(event) {
    const draggedId = event.dataTransfer.getData("text/plain");
    onDrop(draggedId, id);
  }

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      onDrop={handleDrop}
      onDragOver={(event) => event.preventDefault()}
      style={{ padding: "10px", border: "1px solid black", margin: "5px" }}
    >
      アイテム{id}
    </div>
  );
}

function Parent() {
  function handleDrop(draggedId, targetId) {
    console.log(`アイテム${draggedId}をアイテム${targetId}にドロップしました`);
  }

  return (
    <div>
      <DraggableItem id={1} onDrop={handleDrop} />
      <DraggableItem id={2} onDrop={handleDrop} />
      <DraggableItem id={3} onDrop={handleDrop} />
    </div>
  );
}

この例では、アイテム間のドラッグ＆ドロップ操作を親コンポーネントで管理しています。

まとめ

これらの応用例を活用することで、複数コンポーネント間のイベント管理を柔軟かつ効率的に実現できます。状態管理ツールやContext APIを適切に利用することで、スケーラブルなReactアプリケーションを構築できます。

演習問題：イベント制御の実践

Reactにおけるイベントバブリングや制御を学んだ知識を活用し、以下の演習問題に挑戦してみましょう。実際にコードを書いて試すことで、イベント管理の理解を深めることができます。

演習問題1: バブリングを利用したイベント管理

以下の要件を満たすReactアプリケーションを作成してください：

親コンポーネント内に3つのボタンを配置します。
各ボタンをクリックしたとき、親コンポーネントのクリックイベントハンドラーでクリックされたボタンのラベルをログに表示します。

ヒント: event.targetを利用します。

期待される動作例:

ボタン1をクリック → コンソールに「ボタン1」と表示される。

演習問題2: バブリングを停止する

以下の条件でイベント伝播を制御してください：

親要素にクリックイベントハンドラーを設定し、「親がクリックされました」とコンソールに出力します。
子要素（ボタン）をクリックしたとき、stopPropagationを使用して親要素への伝播を停止します。

期待される動作例:

子要素をクリック → 「親がクリックされました」は表示されない。

演習問題3: 複数子コンポーネントの状態管理

次の要件を満たすアプリケーションを作成してください：

親コンポーネントにボタンが3つあり、クリックされたボタンが「選択中」の状態になる。
選択されているボタンは背景色が青、選択されていないボタンは背景色が白になる。

期待される動作例:

ボタン1をクリック → ボタン1が青になる。
ボタン2をクリック → ボタン2が青になり、ボタン1は白に戻る。

ヒント: 状態管理にはuseStateを使用します。

演習問題4: 親子間のイベント通信

以下の仕様を満たすReactアプリを作成してください：

親コンポーネントに「イベントログ」の表示領域を設けます。
子コンポーネントでボタンをクリックすると、親コンポーネントのイベントログに「ボタンがクリックされました」と表示される。
子コンポーネントは独立しており、複数のインスタンスで同じ動作を実現します。

期待される動作例:

子コンポーネントのボタンをクリック → 親のログ領域にメッセージが表示される。

演習問題5: コンテキストAPIでの状態共有

次の仕様でアプリケーションを作成してください：

複数の子コンポーネントが親コンポーネントで管理される「選択中のボタンID」を共有します。
子コンポーネントをクリックすると、そのIDが「選択中のボタンID」に設定され、背景色が変わります。
Context APIを使用して、状態管理を実現します。

期待される動作例:

ボタン2をクリック → ボタン2が選択状態になり、他のボタンは非選択状態になる。

コード提出と解答の確認

これらの演習問題を通じて、Reactでのイベント制御スキルを磨くことができます。コードを書いて動作を確認し、期待される動作と一致するか確認してみてください。また、課題解決においてstopPropagationやpreventDefaultなどのイベント制御メソッドを活用してください。

これらの問題に取り組むことで、Reactでのイベントバブリングとその制御に関するスキルを深く理解できるでしょう。

まとめ

本記事では、Reactにおけるイベントバブリングの仕組みと、その制御方法について詳しく解説しました。イベントバブリングの基本概念から、stopPropagationやpreventDefaultによる制御方法、親子間や複数コンポーネント間でのイベント管理の応用例までを学びました。

React独自のSyntheticEventを理解し、バブリングやキャプチャリングを適切に活用することで、効率的かつ柔軟なイベント管理が可能になります。また、演習問題に取り組むことで実践力を高められるでしょう。

イベント管理のベストプラクティスを身につけることで、Reactアプリケーションの品質と開発効率を大幅に向上させることができます。今後の開発でぜひ活用してください。

Reactのイベントバブリングを徹底解説：効果的な制御方法と応用例

イベントバブリングとは

イベントバブリングの仕組み

日常的な例

なぜイベントバブリングが重要なのか

Reactにおけるイベントバブリングの特徴

SyntheticEventとは

Reactにおけるイベントバブリングの挙動

例: Reactでのバブリング挙動

Reactのイベントバブリングを理解する重要性

イベントの伝播を制御する方法

`stopPropagation`による伝播の停止

`preventDefault`によるデフォルト動作の抑止

キャプチャリングフェーズの利用

適切な制御を行うためのポイント

親コンポーネントでのイベント処理

親コンポーネントでのイベントハンドリングの基本

バブリングを利用した柔軟なイベント処理

特定の子要素に対するイベントの制御

注意点

子コンポーネントでのイベント処理の工夫

子コンポーネントでのイベント処理の基本

子コンポーネントでのイベント制御

コンポーネント間でのイベント伝播の管理

例: 複数の子コンポーネントのイベント管理

注意点

制御のベストプラクティス

1. 必要最低限のイベントリスナーを設定する

2. コールバック関数で親子間の連携を強化する

3. `stopPropagation`と`preventDefault`を適切に使う

4. キャプチャリングフェーズを活用する

5. カスタムフックでイベント制御を簡略化する

6. 状態管理ツールと組み合わせて管理を最適化する

応用例：複数コンポーネントでのイベント処理

例1: 親コンポーネントでの一括管理

例2: 子コンポーネント間での状態共有

例3: コンテキストAPIを利用したイベント管理

例4: ドラッグ＆ドロップイベントの管理

まとめ

演習問題：イベント制御の実践

演習問題1: バブリングを利用したイベント管理

演習問題2: バブリングを停止する

演習問題3: 複数子コンポーネントの状態管理

演習問題4: 親子間のイベント通信

演習問題5: コンテキストAPIでの状態共有

コード提出と解答の確認

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル