React イベントトリガー解説

ReactJSにおけるイベントトリガーと入力イベントの解説

ReactJSでは、イベントトリガーや入力イベントを扱う方法は、HTMLのイベントハンドラーと似ていますが、いくつかの重要な違いがあります。

イベントトリガー (Event Triggers)

ReactJSでは、コンポーネントのJSX内でイベントハンドラーを定義します。これは、HTMLのイベント属性と似ていますが、JavaScript関数への参照になっています。

function MyComponent() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

• onClick 属性は、ボタンがクリックされたときに実行される handleClick 関数を参照しています。

入力イベント (Input Events)

入力イベントは、ユーザーがフォーム要素（入力フィールド、テキストエリア、チェックボックスなど）と対話する際に発生します。

function MyForm() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={   handleChange} />
      <p>Input value: {inputVa   lue}</p>
    </div>
  );
}

• handleChange 関数は、入力フィールドの新しい値を setInputValue を使って状態に更新します。
• onChange 属性は、入力フィールドの値が変更されたときに実行される handleChange 関数を参照しています。

重要なポイント

• 状態管理
  入力イベントを処理する場合、通常は状態管理を使って入力値をコンポーネント内で追跡します。
• 合成イベント
  ReactJSは合成イベントと呼ばれる抽象的なイベントシステムを使用しており、ブラウザのネイティブイベントをラップしています。
• イベントハンドラーは関数への参照です
  HTMLのイベント属性とは異なり、ReactJSでは直接JavaScriptコードを記述しません。

function MyComponent() {
  const handleClick = () => {
    console.log("ボタンがクリックされました！");
  };

  return (
    <button onClick={handleClick}>クリックしてね</button>
  );
}

キーボードイベント

function MyInput() {
  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      console.log("Enterキーが押されました！");
    }
  };

  return (
    <input type="text" onKeyPress={handleKeyPress} />
  );
}

• event.key プロパティを使って押されたキーをチェックします。
• onKeyPress 属性は、キーボードキーが押されたときに handleKeyPress 関数を呼び出します。

テキスト入力イベント

function MyForm() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={   handleChange} />
      <p>入力値: {inputValue}</p>
    </div>
  );
}

• event.target.value プロパティを使って入力フィールドの新しい値を取得します。

チェックボックスイベント

function MyCheckbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheck = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={handleCheck} />
      <p>チェック状態: {isChecked ? "オン" : "オフ"}</p>
    </div>
  );
}

• event.target.checked プロパティを使ってチェックボックスの状態を取得します。

Refによる直接アクセス:

• 方法
  useRef フックを使用して、コンポーネントのDOM要素への参照を取得し、その上でイベントをトリガーしたり、値を取得したりします。
• 目的
  コンポーネントのDOM要素に直接アクセスする必要がある場合。

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <   button onClick={handleClick}>   フォーカス</button>
    </div>
  );
}

カスタムイベント:

• 方法
  dispatchEvent メソッドを使用してカスタムイベントを作成し、それを他のコンポーネントでリスナーを使って受け取ります。
• 目的
  コンポーネント間でイベントを伝達する場合。

function ParentComponent() {
  const handleChildEvent = (event) => {
    console.log("子コンポーネントからイベントを受け取りました:", event.detail);
  };

  return (
    <ChildComponent onCustomEvent={handleChildEvent} />
  );
}

function ChildComponent({ onCustomEvent }) {
  const handleClick = () => {
    const event = new CustomEvent("customEvent", { detail: "カスタムデータ" });
    dispatchEvent(event);
  };

  return (
    <button onClick={handleClick}>カスタムイベントをトリガー</button>
  );
}

ライブラリによるイベント管理:

• 方法
  react-event-listener や react-event-proxy などのライブラリを使用して、イベントのリスナーを管理したり、イベントをプロキシしたりします。
• 目的
  イベントの管理や伝達を簡素化する場合。

import ReactEventListener from 'react-event-listener';

function MyComponent() {
  return (
    <ReactEventListener
      target="window"
      eventName="resize"
      handleEvent={() => {
        console.log("ウィンドウサイズが変更されました");
      }}
    >
      {/* コンポーネントのコンテンツ */}
    </ReactEventListener>
  );
}