Reactでのイベント伝播（バブリングとキャプチャリング）は、フロントエンド開発において重要な概念の一つです。これを正しく理解することで、複雑なユーザーインターフェースの動作を制御しやすくなります。本記事では、イベント伝播の基本概念から、Reactにおける実践的な使用方法、そして複雑な状況での制御テクニックまで詳しく解説します。Reactでより洗練されたUIを構築するための基礎を学びましょう。
イベント伝播の基本概念
イベント伝播とは、DOM要素で発生したイベントがどのように親要素や子要素へ伝わるかを示す仕組みです。このプロセスには大きく分けてキャプチャリングフェーズとバブリングフェーズの2つがあります。
キャプチャリングフェーズ
イベントがルート要素からターゲット要素に向かって伝わるフェーズです。このフェーズでは、親要素から子要素へとイベントが順次渡されます。たとえば、ドキュメント全体で設定されたリスナーが、イベントが発生した要素に到達するまでの間にキャプチャリングとして検知します。
バブリングフェーズ
イベントがターゲット要素で処理された後、ルート要素に向かって逆方向に伝播するフェーズです。一般的なクリックイベントなどはこのフェーズでよく利用され、親要素に設定されたリスナーがイベントを検知できます。
例: キャプチャリングとバブリングの違い
以下の例では、キャプチャリングとバブリングの動きを観察できます。
document.addEventListener('click', () => console.log('キャプチャリング: ドキュメント'), true); // キャプチャリング
document.addEventListener('click', () => console.log('バブリング: ドキュメント'), false); // バブリング
const button = document.querySelector('button');
button.addEventListener('click', () => console.log('ターゲット: ボタン'));ボタンをクリックした場合、出力は次の順番になります:
- キャプチャリング: ドキュメント
- ターゲット: ボタン
- バブリング: ドキュメント
イベント伝播の仕組みを理解することで、イベント処理の順序や期待する動作を正確に設定することが可能です。
Reactにおけるイベントの仕組み
Reactのイベント処理は、ネイティブのDOMイベントとは異なり、独自のSyntheticEventという仕組みを採用しています。これにより、Reactアプリケーションのイベントハンドリングは一貫性と効率性が向上しています。
SyntheticEventの特徴
SyntheticEventは、Reactによって提供されるラッパーオブジェクトで、すべてのブラウザで一貫したAPIを提供します。以下はその主な特徴です：
- ブラウザ間の互換性：異なるブラウザのイベント仕様を統一します。
- パフォーマンス最適化：イベントリスナーは一元管理され、ルート要素にのみアタッチされます（イベントデリゲーション）。
- メモリ効率：イベントオブジェクトは再利用されるため、不要になった際に自動で破棄されます。
イベントハンドラの設定
Reactでは、イベントリスナーをコンポーネント内で設定します。以下はクリックイベントを設定する例です：
function ExampleComponent() {
const handleClick = (event) => {
console.log('ボタンがクリックされました！', event);
};
return <button onClick={handleClick}>クリック</button>;
}上記のコードでは、onClickプロパティを使用してイベントハンドラを設定しています。ここで渡されるeventはSyntheticEventです。
SyntheticEventとネイティブイベントの違い
ReactのSyntheticEventはネイティブDOMイベントを模倣していますが、いくつかの違いがあります：
| 特徴 | SyntheticEvent | ネイティブイベント |
|---|---|---|
| APIの一貫性 | 高い | ブラウザごとに異なる場合あり |
| イベントリスナー | Reactがルートで管理 | DOM要素ごとに管理 |
| パフォーマンス最適化 | 優れている | 比較的非効率的 |
ネイティブイベントの使用
場合によっては、ネイティブイベントが必要になることもあります。その場合、event.nativeEventを利用します：
function ExampleComponent() {
const handleClick = (event) => {
console.log('ネイティブイベント:', event.nativeEvent);
};
return <button onClick={handleClick}>クリック</button>;
}このように、ReactではSyntheticEventをベースに効率的で一貫したイベントハンドリングを提供しつつ、必要に応じてネイティブイベントも使用できます。Reactのイベントモデルを理解することで、より高度なUI制御が可能になります。
イベントバブリングの挙動と具体例
イベントバブリングは、イベントが発生したターゲット要素から親要素に向かって伝播する仕組みです。この動作により、親要素に設定されたイベントリスナーが子要素のイベントを受け取ることができます。Reactにおいても、このバブリングの概念が重要です。
イベントバブリングの仕組み
例えば、以下のようなHTML構造を考えます：
<div id="parent">
<button id="child">クリック</button>
</div>ここで、#parentと#childの両方にクリックイベントリスナーを設定すると、子要素で発生したイベントは親要素に伝播します。
Reactでの具体例
Reactコンポーネントでバブリングの挙動を確認するコードを見てみましょう：
function BubblingExample() {
const handleParentClick = () => {
console.log('親要素がクリックされました！');
};
const handleChildClick = () => {
console.log('子要素がクリックされました！');
};
return (
<div onClick={handleParentClick} style={{ padding: '20px', background: '#f0f0f0' }}>
<button onClick={handleChildClick}>クリック</button>
</div>
);
}このコードでは、以下の順序でログが出力されます：
- 子要素のクリック:
子要素がクリックされました！ - 親要素のクリック:
親要素がクリックされました！
これは、Reactがバブリングフェーズでイベントを処理するためです。
イベントバブリングの停止
場合によっては、バブリングを停止したいことがあります。その際は、event.stopPropagation()を使用します：
function BubblingExample() {
const handleParentClick = () => {
console.log('親要素がクリックされました！');
};
const handleChildClick = (event) => {
event.stopPropagation();
console.log('子要素がクリックされました！（バブリング停止）');
};
return (
<div onClick={handleParentClick} style={{ padding: '20px', background: '#f0f0f0' }}>
<button onClick={handleChildClick}>クリック</button>
</div>
);
}この場合、ログの出力は次のようになります：
- 子要素のクリック:
子要素がクリックされました！（バブリング停止）
親要素のログは出力されません。
実用例: モーダルダイアログでの使用
バブリングの制御は、モーダルの外側クリックで閉じる処理に活用できます：
function Modal({ onClose }) {
const handleOutsideClick = () => {
onClose();
};
const handleInsideClick = (event) => {
event.stopPropagation();
};
return (
<div onClick={handleOutsideClick} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0, 0, 0, 0.5)' }}>
<div onClick={handleInsideClick} style={{ margin: '100px auto', padding: '20px', background: 'white', width: '300px' }}>
モーダルコンテンツ
</div>
</div>
);
}ここでは、モーダル内のクリックはevent.stopPropagation()によってバブリングが停止され、外側のクリックイベントは伝播されます。このように、イベントバブリングの理解と制御は、実用的なUI開発で非常に役立ちます。
イベントキャプチャリングの挙動と具体例
イベントキャプチャリングは、イベントがルート要素からターゲット要素に向かって伝播するフェーズです。この仕組みを活用することで、特定の順序でイベントを処理したり、ターゲット要素に到達する前にイベントを制御することができます。
イベントキャプチャリングの仕組み
キャプチャリングは、親要素が子要素のイベントを先に検知するという動作を特徴とします。この動作は、通常のバブリングとは逆方向のイベント伝播です。
Reactでの具体例
Reactでは、イベントハンドラにキャプチャリングモードを設定することで、キャプチャリングフェーズでイベントを受け取ることができます。これを実現するには、イベントリスナーを明示的に設定する必要があります。以下はその具体例です：
function CapturingExample() {
const handleParentClick = () => {
console.log('親要素がキャプチャリングで検知されました！');
};
const handleChildClick = () => {
console.log('子要素がターゲットとして検知されました！');
};
return (
<div
onClickCapture={handleParentClick} // キャプチャリングフェーズで実行
style={{ padding: '20px', background: '#f0f0f0' }}
>
<button onClick={handleChildClick}>クリック</button>
</div>
);
}このコードでは、クリックイベントが以下の順序でログに出力されます：
- 親要素のキャプチャリング:
親要素がキャプチャリングで検知されました！ - 子要素のクリック:
子要素がターゲットとして検知されました！
onClickCaptureを利用することで、キャプチャリングフェーズでイベントを処理できるようになります。
イベントキャプチャリングの停止
キャプチャリングフェーズでもイベント伝播を停止することが可能です。event.stopPropagation()を使用することで、親要素からのさらなる伝播を止めることができます。
function CapturingExample() {
const handleParentClick = () => {
console.log('親要素がキャプチャリングで検知されました！');
};
const handleChildClick = (event) => {
event.stopPropagation();
console.log('子要素でキャプチャリングを停止しました！');
};
return (
<div
onClickCapture={handleParentClick}
style={{ padding: '20px', background: '#f0f0f0' }}
>
<button onClickCapture={handleChildClick}>クリック</button>
</div>
);
}この場合、以下の順序でログが出力されます：
- 子要素のクリック:
子要素でキャプチャリングを停止しました！
親要素のキャプチャリング処理は実行されません。
実用例: グローバルイベントの優先処理
キャプチャリングは、グローバルなクリックイベントなどをターゲット要素に到達する前に処理したい場合に役立ちます。たとえば、クリックでフォームを閉じる処理を実装する際に、キャプチャリングを活用できます。
function GlobalClickHandler({ onClose }) {
React.useEffect(() => {
const handleClick = (event) => {
console.log('グローバルクリックがキャプチャリングで検知されました！');
onClose();
};
window.addEventListener('click', handleClick, true); // キャプチャリングモード
return () => window.removeEventListener('click', handleClick, true);
}, [onClose]);
return (
<div style={{ padding: '20px', background: '#fff' }}>
<p>クリックで閉じる処理が発生します。</p>
</div>
);
}この例では、キャプチャリングフェーズでイベントを検知するため、要素のバブリングによるイベント処理よりも早く制御を行えます。このように、キャプチャリングを活用することで、イベント伝播の順序を柔軟に制御できます。
バブリングとキャプチャリングの制御方法
Reactでは、バブリングとキャプチャリングの挙動を制御することで、イベント伝播を意図した通りに管理することができます。この制御には、stopPropagation()やpreventDefault()などのメソッドを活用します。
stopPropagation()によるイベント伝播の停止
stopPropagation()は、イベントがそれ以上伝播しないようにするためのメソッドです。バブリングとキャプチャリングの両フェーズで有効です。
function StopPropagationExample() {
const handleParentClick = () => {
console.log('親要素がクリックされました！');
};
const handleChildClick = (event) => {
event.stopPropagation();
console.log('子要素がクリックされました！（伝播停止）');
};
return (
<div onClick={handleParentClick} style={{ padding: '20px', background: '#f0f0f0' }}>
<button onClick={handleChildClick}>クリック</button>
</div>
);
}この場合、親要素のクリックイベントは発生せず、ログには以下が表示されます：
- 子要素のクリック:
子要素がクリックされました！（伝播停止）
preventDefault()によるデフォルト動作の防止
preventDefault()は、ブラウザのデフォルト動作（例: フォームの送信、リンクの遷移など）を防止します。Reactでもこれを活用して、特定の操作を制御することが可能です。
function PreventDefaultExample() {
const handleLinkClick = (event) => {
event.preventDefault();
console.log('リンクのデフォルト動作が防止されました！');
};
return (
<a href="https://example.com" onClick={handleLinkClick}>
サンプルリンク
</a>
);
}この場合、リンクをクリックしてもhttps://example.comに遷移せず、ログに次のメッセージが表示されます：
- リンククリック:
リンクのデフォルト動作が防止されました！
バブリングとキャプチャリングを組み合わせた制御
onClickとonClickCaptureを組み合わせることで、キャプチャリングフェーズとバブリングフェーズの両方でイベントを制御できます。
function CombinedControlExample() {
const handleParentCapture = (event) => {
console.log('親要素でキャプチャリングが検知されました！');
};
const handleParentBubbling = () => {
console.log('親要素でバブリングが検知されました！');
};
const handleChildClick = (event) => {
event.stopPropagation();
console.log('子要素がクリックされました！（伝播停止）');
};
return (
<div
onClickCapture={handleParentCapture}
onClick={handleParentBubbling}
style={{ padding: '20px', background: '#f0f0f0' }}
>
<button onClick={handleChildClick}>クリック</button>
</div>
);
}この例では、以下の順序でログが出力されます：
- キャプチャリングフェーズ:
親要素でキャプチャリングが検知されました！ - 子要素のクリック:
子要素がクリックされました！（伝播停止）
親要素のバブリングイベントは発生しません。
useRefを使ったカスタムイベント制御
場合によっては、特定の条件下でイベントの制御を柔軟に行う必要があります。useRefを活用することで、状態に依存しないイベント制御が可能です。
function ConditionalControlExample() {
const shouldStopPropagation = React.useRef(true);
const handleClick = (event) => {
if (shouldStopPropagation.current) {
event.stopPropagation();
console.log('イベントの伝播を停止しました！');
} else {
console.log('イベントは伝播されました！');
}
};
return (
<div onClick={() => console.log('親要素がクリックされました！')}>
<button onClick={handleClick}>クリック</button>
</div>
);
}ここでは、shouldStopPropagationの値を動的に変更することで、イベントの伝播を制御できます。
制御方法の適切な選択
- 親要素に影響を与えたくない場合:
stopPropagation()を使用する。 - デフォルトのブラウザ動作を防ぎたい場合:
preventDefault()を使用する。 - 特定のフェーズでの処理を優先したい場合:
onClickCaptureを利用する。
これらの制御方法を適切に使い分けることで、意図した通りにイベントを管理できるようになります。
Reactでのイベントリスナーの設定と制御
Reactでは、イベントリスナーの設定方法や制御が効率的に設計されています。SyntheticEventを活用しつつ、特定の要件に応じた柔軟なリスナー設定が可能です。ここでは、イベントリスナーの基本設定方法から、高度な制御までを解説します。
イベントリスナーの基本設定
Reactでは、イベントハンドラを直接コンポーネントのプロパティとして設定します。以下はonClickを使った基本的な例です：
function BasicListenerExample() {
const handleClick = () => {
console.log('ボタンがクリックされました！');
};
return <button onClick={handleClick}>クリック</button>;
}イベントリスナーは、DOMのイベントとは異なり、React独自のSyntheticEventを通じて管理されます。
複数のイベントリスナーを設定する
1つの要素に複数のイベントリスナーを設定する場合、それぞれを異なるイベントプロパティで指定できます。
function MultipleListenersExample() {
const handleMouseEnter = () => {
console.log('マウスがボタンに入りました！');
};
const handleMouseLeave = () => {
console.log('マウスがボタンから離れました！');
};
return (
<button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
ホバー
</button>
);
}このコードでは、マウスの動きに応じてログが出力されます。
条件付きイベントリスナー
特定の条件下でのみイベントを発火させたい場合、状態管理を活用できます。
function ConditionalListenerExample() {
const [isEnabled, setIsEnabled] = React.useState(true);
const handleClick = () => {
console.log('条件を満たしてクリックが実行されました！');
};
return (
<div>
<button onClick={isEnabled ? handleClick : null}>クリック</button>
<button onClick={() => setIsEnabled((prev) => !prev)}>
{isEnabled ? '無効化する' : '有効化する'}
</button>
</div>
);
}ここでは、「クリック」ボタンが有効または無効になる挙動を切り替えられます。
ネイティブイベントリスナーの使用
ReactのSyntheticEventでは対応できない場合、ネイティブイベントリスナーを使用する必要があります。useEffectを利用してイベントを登録できます。
function NativeListenerExample() {
React.useEffect(() => {
const handleResize = () => {
console.log('ウィンドウがリサイズされました！');
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return <p>ウィンドウをリサイズしてください。</p>;
}この例では、ウィンドウサイズ変更時にログが出力されます。
イベントリスナーの削除
ReactのSyntheticEventでは、Reactが自動でイベントリスナーを管理するため、手動で削除する必要はありません。しかし、ネイティブイベントを使用する場合は、useEffectのクリーンアップ関数を必ず設定する必要があります。
function CleanupExample() {
React.useEffect(() => {
const handleScroll = () => {
console.log('スクロールイベントが発生しました！');
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return <p>スクロールしてみてください。</p>;
}これにより、コンポーネントのアンマウント時にイベントリスナーが正しく削除されます。
まとめ
Reactでのイベントリスナーの設定と制御は、次のポイントを押さえることで効果的に行えます：
SyntheticEventを活用して一貫性のあるイベント管理。- 状態管理を使用して条件付きリスナーを実装。
- 必要に応じてネイティブイベントを使用し、
useEffectで適切に管理。
これらの方法を活用することで、柔軟で効率的なイベント管理を実現できます。
高度なイベント伝播の制御方法
Reactでは、カスタムイベントや条件付きイベント処理など、複雑な状況でも効率的にイベント伝播を制御する手法が提供されています。これらの高度な制御を理解し、適切に活用することで、柔軟性の高いUI設計が可能になります。
カスタムイベントを活用した制御
Reactでカスタムイベントを作成し、イベント伝播に追加のロジックを加えることで、複雑なシナリオに対応できます。たとえば、複数のコンポーネント間での通信を管理するケースです。
function CustomEventExample() {
const handleCustomEvent = (event) => {
console.log('カスタムイベントを検知しました！', event.detail);
};
React.useEffect(() => {
const customEventHandler = (event) => handleCustomEvent(event);
window.addEventListener('customEvent', customEventHandler);
// クリーンアップ
return () => {
window.removeEventListener('customEvent', customEventHandler);
};
}, []);
const triggerCustomEvent = () => {
const event = new CustomEvent('customEvent', { detail: { message: 'Hello from Custom Event' } });
window.dispatchEvent(event);
};
return <button onClick={triggerCustomEvent}>カスタムイベントを発火</button>;
}このコードでは、ボタンをクリックするとカスタムイベントが発火し、イベントデータがコンソールに表示されます。
条件付きイベント処理
複数の条件を基にイベントの処理を分岐させる場合、イベントハンドラ内にロジックを追加します。
function ConditionalPropagationExample() {
const handleClick = (event) => {
if (event.target.tagName === 'BUTTON') {
console.log('ボタンがクリックされました！');
} else {
console.log('他の要素がクリックされました！');
}
};
return (
<div onClick={handleClick} style={{ padding: '20px', background: '#f0f0f0' }}>
<button>ボタン</button>
<p>他のエリア</p>
</div>
);
}この例では、クリックした要素がボタンかどうかに応じて異なるログを出力します。
イベントのデリゲーションを活用
多くの要素に個別のリスナーを追加する代わりに、親要素にリスナーを設定してイベント伝播を利用する手法です。
function EventDelegationExample() {
const handleListClick = (event) => {
if (event.target.tagName === 'LI') {
console.log(`リストアイテムがクリックされました！: ${event.target.textContent}`);
}
};
return (
<ul onClick={handleListClick}>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
);
}この方法では、リストアイテムごとにリスナーを追加する必要がなくなり、パフォーマンスが向上します。
条件付き伝播停止
特定の条件下でのみイベント伝播を停止したい場合、stopPropagation()と条件式を組み合わせて制御します。
function ConditionalStopExample() {
const handleClick = (event) => {
if (event.target.textContent === '伝播停止') {
event.stopPropagation();
console.log('伝播が停止されました！');
} else {
console.log('通常のクリックイベントです！');
}
};
return (
<div onClick={handleClick} style={{ padding: '20px', background: '#f0f0f0' }}>
<button>通常クリック</button>
<button>伝播停止</button>
</div>
);
}この例では、「伝播停止」ボタンをクリックした場合のみイベント伝播が停止されます。
高度なUI制御の実用例
以下は、モーダルの外側クリックで閉じる処理に条件付き伝播停止を利用した例です：
function ModalWithConditionalControl({ onClose }) {
const handleOutsideClick = (event) => {
if (event.target.id === 'modalBackdrop') {
onClose();
}
};
return (
<div
id="modalBackdrop"
onClick={handleOutsideClick}
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: 'rgba(0, 0, 0, 0.5)',
}}
>
<div
onClick={(e) => e.stopPropagation()}
style={{
margin: '100px auto',
padding: '20px',
background: 'white',
width: '300px',
}}
>
モーダルコンテンツ
</div>
</div>
);
}ここでは、モーダル外部のクリックイベントを検知してモーダルを閉じる挙動を実現しています。
まとめ
- カスタムイベントで独自のイベントロジックを追加。
- 条件付きイベント処理で動作を柔軟に変更。
- イベントデリゲーションでパフォーマンスを向上。
- 条件付き伝播停止で必要に応じてイベント伝播を制御。
これらの手法を組み合わせることで、複雑なUI要件を満たす柔軟なイベント制御が可能になります。
実践：イベント伝播を活用したUIの設計例
Reactでイベント伝播を利用すると、複雑なUI設計がより簡潔に行えます。ここでは、イベント伝播の仕組みを活用して実際にUIを構築する例を紹介します。
ケーススタディ：インタラクティブなドロップダウンメニュー
ドロップダウンメニューでは、クリックイベントを活用してメニューの開閉を制御し、外部クリックで閉じる機能を実装できます。
function DropdownMenu() {
const [isOpen, setIsOpen] = React.useState(false);
const toggleMenu = () => {
setIsOpen((prev) => !prev);
};
const handleOutsideClick = (event) => {
if (event.target.closest('.dropdown-menu')) return; // メニュー内部なら何もしない
setIsOpen(false);
};
React.useEffect(() => {
document.addEventListener('click', handleOutsideClick);
return () => {
document.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="dropdown">
<button onClick={toggleMenu}>メニューを開く</button>
{isOpen && (
<div className="dropdown-menu" style={{ border: '1px solid #ccc', padding: '10px', background: '#fff' }}>
<p>メニュー項目1</p>
<p>メニュー項目2</p>
<p>メニュー項目3</p>
</div>
)}
</div>
);
}特徴
- バブリングを活用して、メニュー外部のクリックを検知。
- 条件付き伝播停止でメニュー内部のクリックをスルー。
- 状態管理による動的な表示・非表示の切り替え。
ケーススタディ：動的リストのイベント処理
リスト要素にクリックイベントを設定し、選択された要素を状態として管理します。
function SelectableList() {
const [selectedItem, setSelectedItem] = React.useState(null);
const handleItemClick = (event) => {
const itemId = event.target.getAttribute('data-id');
setSelectedItem(itemId);
console.log(`選択されたアイテム: ${itemId}`);
};
const items = ['アイテム1', 'アイテム2', 'アイテム3'];
return (
<ul onClick={handleItemClick}>
{items.map((item, index) => (
<li key={index} data-id={index} style={{ padding: '5px', cursor: 'pointer' }}>
{item}
</li>
))}
</ul>
);
}特徴
- イベントデリゲーションで効率的なイベントリスナー管理。
data-id属性を利用してクリックされたアイテムを特定。
ケーススタディ：ツールチップの表示
マウスイベントを活用して、ツールチップを動的に表示するUIを実装します。
function TooltipExample() {
const [tooltip, setTooltip] = React.useState({ visible: false, x: 0, y: 0, content: '' });
const handleMouseEnter = (event) => {
const content = event.target.getAttribute('data-tooltip');
setTooltip({ visible: true, x: event.clientX, y: event.clientY, content });
};
const handleMouseLeave = () => {
setTooltip({ visible: false, x: 0, y: 0, content: '' });
};
return (
<div>
<button
data-tooltip="ボタン1の説明"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
ボタン1
</button>
<button
data-tooltip="ボタン2の説明"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
ボタン2
</button>
{tooltip.visible && (
<div
style={{
position: 'absolute',
top: tooltip.y + 10,
left: tooltip.x + 10,
background: '#333',
color: '#fff',
padding: '5px',
borderRadius: '5px',
pointerEvents: 'none',
}}
>
{tooltip.content}
</div>
)}
</div>
);
}特徴
- マウスイベントを利用して動的にツールチップを表示。
- 位置情報をイベントオブジェクトから取得して正確に配置。
複数のイベント処理を組み合わせた実用例
以下は、ドロップダウンメニューとツールチップを組み合わせた複合UIの例です。
function AdvancedUI() {
const [tooltip, setTooltip] = React.useState({ visible: false, content: '' });
const [menuOpen, setMenuOpen] = React.useState(false);
const toggleMenu = () => setMenuOpen((prev) => !prev);
const handleMouseEnter = (event) => setTooltip({ visible: true, content: event.target.textContent });
const handleMouseLeave = () => setTooltip({ visible: false, content: '' });
return (
<div>
<button onClick={toggleMenu}>メニューを開く</button>
{menuOpen && (
<ul>
<li onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>メニュー項目1</li>
<li onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>メニュー項目2</li>
<li onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>メニュー項目3</li>
</ul>
)}
{tooltip.visible && (
<div style={{ position: 'absolute', background: '#000', color: '#fff', padding: '5px' }}>
{tooltip.content}
</div>
)}
</div>
);
}特徴
- ドロップダウンとツールチップの相互作用を組み合わせた複合的なUI。
- 状態管理とイベント伝播の連携による効率的な実装。
これらの実践例を基に、複雑なUI設計にも柔軟に対応できるイベント処理をマスターしましょう。
まとめ
本記事では、Reactにおけるイベント伝播の基本概念から、バブリングとキャプチャリングの違い、制御方法、さらには高度なイベント管理を活用した実践的なUI設計例までを詳しく解説しました。
イベント伝播の仕組みを理解し、適切に制御することで、効率的で使いやすいインターフェースを構築できます。特に、stopPropagationやpreventDefaultを活用した柔軟なイベント管理、イベントデリゲーションによる効率的なリスナー設定、カスタムイベントや条件付き処理を用いた複雑なUI設計は、実務においても役立つスキルです。
これらを基に、より直感的でインタラクティブなReactアプリケーションを作り上げてください。イベント伝播を制することで、UI開発の新たな可能性が広がります！
コメント