【React】イベントハンドラとは何か？使い方と注意点を実例で解説

React開発において、ユーザーの「クリック」や「入力」といったイベントを扱うことは避けて通れません。

「HTMLのイベント処理と何が違うの？」「onClick={handleClick}ってどういう意味？」と疑問に思ったことはありませんか？

本記事では、Reactのイベントハンドラの役割、基本的な使い方や注意点など、初心者でもすぐに実践できるコード例を用いて解説しています。

イベントハンドラとは何か？

Reactのイベントハンドラは、ユーザーの操作（イベント）に応じて実行される関数のことです。

例えば、「ボタンがクリックされたとき」「入力フォームの内容が変わったとき」「マウスカーソルが要素の上に乗ったとき」など、特定の出来事（イベント）が発生した際に、その後の動作（ハンドラ）を定義するために使われます。

Reactでのイベント処理は、通常のJavaScriptのイベント処理と似ていますが、いくつかの重要な違いがあります。

イベントハンドラの基本

関数名はhandleから始める

イベントハンドラはコンポーネント内で通常のJavaScript関数として定義します。

関数名は基本的にhandleから始まる名前にすることが多いです（例：handleClick、handleChange）。

属性でタグに紐づける

イベントハンドラをタグと紐づけるには、onClickなどイベントの種類に応じた特別な属性名を使います。

属性名はHTMLのイベント名に似ていますが、キャメルケースで記述します。

例えば、onClick、onChange、onSubmitなどがあります。

<開始タグ 属性={イベントハンドラ}></終了タグ>

例：onClick

<button onClick={handleClick}>
  詳細はこちら
</button>

関数そのものを渡す（※実行しない）

イベントハンドラを渡すときは、値にイベントハンドラの関数名のみを記載します。カッコは不要です。

• OK例（関数を渡す）: onClick={handleClick}
• NG例（関数を呼び出す）: onClick={handleClick()}

()をつけてしまうと、コンポーネントがレンダリングされるたびにすぐにその関数が実行されてしまい、クリック時には何も起こらなくなってしまいます。

イベントハンドラの実例

ボタンをクリックしたときにアラートメッセージを表示する場合は以下のようにイベントハンドラを作成＆セットします。

function MyButton() {
  // 1. イベントハンドラ関数を定義
  const handleClick = () => {
    alert('ボタンがクリックされました！');
  };

  return (
    // 2. イベントハンドラを紐付け
    <button onClick={handleClick}>
      クリックしてね
    </button>
  );
}

イベントハンドラをインラインで定義する

別の関数で定義したイベントハンドラを呼び出すことが一般的ですが、属性を指定した際にインラインでイベントハンドラの関数を記述することもできます。

<button onClick={function handleClick() {
  alert('クリックされました！');
}}>

アロー関数を使うと簡略化できます。

<button onClick={() => {
  alert('クリックされました！');
}}>

イベントハンドラの属性(Props)一覧

イベントハンドラのProps（属性）は、HTMLのイベント名に対応していますが、キャメルケース (camelCase) で記述され、関数を渡す点が特徴です。

主なイベントハンドラの属性（Props）には以下のようなものがあります。

マウスイベント

ユーザーがマウスを使って操作したときに発生するイベントです。

フォームイベント

ユーザーがフォーム要素（入力フィールド、ボタンなど）を操作したときに発生するイベントです。特に重要で頻繁に使われます。

キーボードイベント

ユーザーがキーボードを操作したときに発生するイベントです。

その他のイベント（クリップボード、画像、メディアなど）

Captureイベント

上記のProps名の後に Capture をつけたバージョン（例：onClickCapture、onFocusCapture）もあります。

通常、イベントは子要素から親要素へ伝播（バブリング）しますが、Captureが付いたイベントハンドラは、イベントが要素に到達する前（キャプチャフェーズ）に実行されます。特定のシナリオでイベント伝播を制御したい場合に利用されます。

イベントオブジェクトが利用できる

すべてのイベントハンドラは、引数としてイベントオブジェクトを受け取ることができます。

慣習的にeventやeという変数名を使います。

イベントオブジェクトを使ったイベントハンドラの実例

例えば、フォームの送信時にページのリロードを防ぐ処理をしたい場合はイベントオブジェクトを使います。

function MyForm() {
  const handleSubmit = (e) => {
    // フォーム送信のデフォルト動作（ページリロード）を停止
    e.preventDefault(); 
    
    console.log('フォームが送信されました（リロードはなし）');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">送信</button>
    </form>
  );
}

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

イベントハンドラにイベントオブジェクト以外の独自の引数を渡すには、アロー関数（無名関数）を使って呼び出す関数をラップします。

これを、タグにイベントハンドラを紐づける際に記述します。

<開始タグ 属性={(e) => イベントハンドラ(引数, e)}></終了タグ>

実例：無名関数で独自の引数を渡す

function ItemList() {
  const items = [
    { id: 1, name: 'リンゴ' },
    { id: 2, name: 'バナナ' }
  ];

  const handleItemClick = (itemId, event) => {
    console.log(`${itemId}番のアイテムがクリックされました。`);
    // event.targetなどで要素の情報も利用可能
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {/* クリック時にhandleClick(item.id)を実行する関数を渡す */}
          <button onClick={(e) => handleItemClick(item.id, e)}>
            {item.name}
          </button>
        </li>
      ))}
    </ul>
  );
}