React でのイベント処理: ユーザー アクションとの対話

イベント処理は、インタラクティブな Web アプリケーションを作成するための React における重要な概念です。 React は、すべてのブラウザーでイベントを処理する一貫した方法を提供し、開発者がクリック、フォーム送信、キーボード入力などのユーザー アクションに応答できるようにします。

---

1. React のイベント処理とは何ですか?

React のイベント処理は、UI 內(nèi)の要素とのユーザー操作 (クリック、キーの押下、マウスの動(dòng)きなど) に応答するプロセスです。 React には、イベントを処理するための獨(dú)自のシステムがあり、ブラウザのネイティブ イベント処理に基づいていますが、React 固有の機(jī)能もいくつか備えています。

React のイベント システム

React は、ネイティブ DOM イベントを獨(dú)自の合成イベント システムにラップし、異なるブラウザー間で一貫した動(dòng)作を保証します。このシステムは、単一のイベント リスナーがドキュメントのルートにアタッチされ、イベントがバブルアップするときに処理される イベント委任 を使用するため、より効率的です。

---

2. React でイベントを処理する方法

React はイベント名にキャメルケース構(gòu)文を使用し、関數(shù)をイベント ハンドラーとして渡します。イベント ハンドラーは、関數(shù)またはアロー関數(shù)の形式で記述されます。

イベント処理の基本構(gòu)文

<button onClick={handleClick}>Click Me</button>

イベントハンドラー関數(shù)の例

const handleClick = () => {
  alert("Button clicked!");
};

const App = () => {
  return <button onClick={handleClick}>Click Me</button>;
};

---

3. React の一般的なイベント

React は、次のような一般的なブラウザ イベントをすべてサポートしています。

• マウス イベント: onClick、onDoubleClick、onMouseDown、onMouseUp、onMouseMove
• キーボード イベント: onKeyDown、onKeyUp、onKeyPress
• フォームイベント: onSubmit、onChange、onFocus、onBlur
• フォーカス イベント: onFocus、onBlur
• クリップボード イベント: onCopy、onCut、onPaste
• タッチ イベント: onTouchStart、onTouchMove、onTouchEnd

マウスイベントの処理例

const handleMouseOver = () => {
  console.log("Mouse is over the button!");
};

const App = () => {
  return <button onMouseOver={handleMouseOver}>Hover over me!</button>;
};

---

4.イベントハンドラーに引數(shù)を渡す

React では、追加の引數(shù)をイベント ハンドラー関數(shù)に渡すことができます。引數(shù)を JSX で直接渡すことも、匿名関數(shù)を使用して渡すこともできます。

匿名関數(shù)の使用

<button onClick={handleClick}>Click Me</button>

.bind() メソッドの使用 (クラスコンポーネント內(nèi))

const handleClick = () => {
  alert("Button clicked!");
};

const App = () => {
  return <button onClick={handleClick}>Click Me</button>;
};

---

5. React の合成イベント

React の合成イベント システムは、ブラウザのネイティブ イベント システムのクロスブラウザ ラッパーです。これにより、イベント ハンドラーが異なる環(huán)境間でも一貫して動(dòng)作することが保証されます。

合成イベントの利點(diǎn):

• ブラウザ間の互換性: React は、イベントがすべてのブラウザで同じように動(dòng)作するように配慮します。
• パフォーマンスの最適化: React はイベント委任を使用します。つまり、各要素に個(gè)別のリスナーをアタッチするのではなく、ルート DOM にイベント リスナーを 1 つだけアタッチします。

---

6. React のイベント プーリング

React はイベント プーリングを使用してメモリ使用量を最適化します。イベント ハンドラーが呼び出されると、パフォーマンス上の理由からイベント オブジェクトがリサイクルされ、そのプロパティは無(wú)効になります。イベント プロパティに非同期でアクセスする必要がある場(chǎng)合は、event.persist() を呼び出してプールから削除する必要があります。

イベントプーリングの例

const handleMouseOver = () => {
  console.log("Mouse is over the button!");
};

const App = () => {
  return <button onMouseOver={handleMouseOver}>Hover over me!</button>;
};

---

7. React でのフォームの処理

React では、フォーム イベントは従來(lái)の HTML フォームとは少し異なる方法で処理されます。通常、狀態(tài)を使用してフォーム データを管理し、入力値が変更されたときに狀態(tài)を更新します。

React でのフォーム処理の例

const handleClick = (name) => {
  alert(`Hello, ${name}`);
};

const App = () => {
  return <button onClick={() => handleClick("John")}>Click Me</button>;
};

---

8.クラスコンポーネントでのイベント処理

クラス コンポーネントでは、イベント ハンドラーは通常、クラスのメソッドとして定義され、コンポーネントの狀態(tài)や他のメソッドにアクセスするには、イベント ハンドラーを正しいコンテキストにバインドする必要があります。

クラスコンポーネントでのイベント処理の例

<button onClick={handleClick}>Click Me</button>

---

9.イベント処理のベスト プラクティス

• アロー関數(shù)または .bind() は慎重に使用してください: 関數(shù)コンポーネントでは、JSX でアロー関數(shù)がよく使用されますが、クラス コンポーネントでは、コンストラクター內(nèi)の正しいコンテキストにイベント ハンドラーを必ずバインドしてください。
• デフォルト動(dòng)作の防止: フォーム送信またはその他のデフォルトのブラウザーアクションを処理するときは、常にevent.preventDefault()を使用します。
• ユーザー入力のデバウンス: 入力やスクロールなどのユーザー入力を処理するときは、デバウンスを使用して過(guò)剰な更新のトリガーを回避します。

---

10.結(jié)論

React でのイベント処理は、インタラクティブ UI 作成の基本的な部分です。 React の合成イベント システムとフックまたはクラス メソッドの機(jī)能を活用することで、開発者はユーザー インタラクションを効率的に管理し、それらのイベントに応じて UI を更新できます。 React でイベントがどのように機(jī)能するかを理解することは、ユーザーのアクションに応答する動(dòng)的アプリケーションを構(gòu)築するために不可欠です。

以上がReact でのイベント処理: ユーザー インタラクションを効果的に管理するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。