インターンレベル: React でのイベントの処理-jsチュートリアル-php.cn

インターンレベル: React でのイベントの処理

WBOY

リリース： 2024-07-17 01:40:50

オリジナル

783 人が閲覧しました

Intern level: Handling Events in React

React でのイベントの処理は、インタラクティブな Web アプリケーションを作成する上で重要な側面です。このガイドでは、イベントハンドラーの追加、合成イベントの理解、イベントハンドラーへの引数の受け渡し、カスタムイベントの作成、イベントの委任など、React でのイベント処理の基本を紹介します。

イベント処理

JSX でのイベントハンドラーの追加

React では、JSX にイベントハンドラーを直接追加できます。イベントハンドラーは、ボタンのクリックやフォームの送信など、特定のイベントが発生したときに呼び出される関数です。 React のイベント処理は通常の HTML でのイベント処理に似ていますが、いくつかの違いがあります。

イベントハンドラーの追加例:

import React from 'react';

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

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

export default App;

ログイン後にコピー

この例では、ボタンがクリックされるたびに handleClick 関数が呼び出されます。 JSX の onClick 属性は、イベントハンドラーを指定するために使用されます。

合成イベント

React は合成イベントと呼ばれるシステムを使用してイベントを処理します。合成イベントは、ブラウザーのネイティブイベントシステムのクロスブラウザーラッパーです。これにより、さまざまなブラウザ間でイベントが一貫して動作することが保証されます。

合成イベントの例:

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

ログイン後にコピー

この例では、handleInputChange 関数は、入力フィールドの値が変更されるたびにその値を記録します。イベントパラメーターは、すべてのブラウザーにわたって一貫したイベントプロパティを提供する合成イベントです。

イベントハンドラーに引数を渡す

場合によっては、追加の引数をイベントハンドラーに渡す必要があります。これは、アロー関数またはバインドメソッドを使用して実行できます。

アロー関数を使用した例:

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

ログイン後にコピー

bind メソッドを使用した例:

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

ログイン後にコピー

どちらのメソッドでも、追加の引数を handleClick 関数に渡すことができます。

カスタムイベント処理

カスタムイベントの作成

React の合成イベントは一般的なユースケースのほとんどをカバーしていますが、より複雑なインタラクションにはカスタムイベントの作成が必要になる場合があります。カスタムイベントは、CustomEvent コンストラクターとdispatchEvent メソッドを使用して作成およびディスパッチできます。

カスタムイベントの作成とディスパッチの例:

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

ログイン後にコピー

この例では、customEvent という名前のカスタムイベントが作成され、ボタンがクリックされたときに送出されます。イベントハンドラーはカスタムイベントをリッスンし、イベントの詳細メッセージを含むアラートを表示します。

React でのイベント委任

イベント委任は、単一のイベントリスナーを使用して複数の要素のイベントを管理する手法です。これは、特にリストやテーブルでイベントを効率的に管理するのに役立ちます。

イベント委任の例:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

ログイン後にコピー

この例では、div 要素の単一のイベントハンドラーがすべてのボタンのクリックイベントを管理します。イベントハンドラーは、event.target をチェックしてどのボタンがクリックされたかを判断し、それに応じてアラートを表示します。

結論

React でのイベントの処理は、インタラクティブなアプリケーションを作成するために不可欠です。イベントハンドラーの追加、合成イベントの使用、イベントハンドラーへの引数の受け渡し、カスタムイベントの作成、イベント委任の活用方法を理解することで、より動的で効率的な React アプリケーションを構築できます。経験を積むにつれて、これらのテクニックが自然になり、複雑なインタラクションを簡単に作成できるようになります。

以上がインターンレベル: React でのイベントの処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。