はじめに

React では、onClick や onChange などの イベントハンドラー を使って、ユーザーのアクションを処理することができます。

通常の HTML の onclick や onchange とは異なり、React のイベントハンドラーは キャメルケース で記述し、関数を渡す形でイベントを処理します。

本記事では、onClick や onChange の基本的な使い方から、イベントオブジェクトの活用方法、複数のイベント処理の実装方法について詳しく解説します。

1. React のイベントハンドラーの基本

1.1 onClick イベント

ボタンがクリックされたときに onClick を使って処理を実行します。

JSX
function ClickButton() {
  const handleClick = () => {
    alert("ボタンがクリックされました");
  };

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

✅ ポイント

• onClick={handleClick} のように関数を渡す。
• 直接 onClick={() => alert("クリック！")} のように書くことも可能。

1.2 onChange イベント

入力フィールドの値が変更されたときに onChange を使います。

JSX
import { useState } from "react";

function InputField() {
  const [text, setText] = useState("");

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

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

✅ ポイント

• onChange で入力値が変更されるたびに handleChange 関数が実行される。
• event.target.value で入力値を取得し、useState を使って更新。

2. イベントオブジェクトの活用

React のイベントハンドラーでは、event オブジェクトが渡されます。

JSX
function LogButton() {
  const handleClick = (event) => {
    console.log("イベントタイプ:", event.type);
  };

  return <button onClick={handleClick}>イベント情報を表示</button>;
}

✅ ポイント

• event.type でイベントの種類を取得。
• event.target で発生元の要素を取得可能。

3. 複数のイベント処理

onClick に複数の処理をまとめることも可能です。

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

  return <button onClick={handleClick}>複数の処理を実行</button>;
}

✅ ポイント

• 1 つの関数内で複数の処理を実行できる。

4. まとめ

React のイベントハンドラーは、ユーザーの操作を処理するための重要な仕組みです。

✅ 学んだこと

• onClick はボタンのクリックイベントを処理。
• onChange は入力フィールドの変更を処理。
• event オブジェクトを使うことで、詳細なイベント情報を取得可能。
• 1 つの関数内で複数の処理を実行できる。

React のイベントハンドリングを適切に活用し、よりインタラクティブな UI を構築しましょう。