Reactでよく使うイベントの種類・イベントハンドリング方法を解説

JavaScript のようなフロントエンドにおいては、ユーザーとの対話を制御するための概念、すなわち「イベント」が重要です。
このイベントというのは、ユーザーがアプリケーションとどのように対話し、アプリケーションがそれにどのように反応するかを決定します。

このようなイベントドリブンの設計は、JavaScriptという言語が特に得意とする部分です。Web上で動的なインタラクションを作成するための主要なツールとなっています。

さらに、JavaScriptのフレームワークであるReactは、これらのイベントを管理するための強力な手段を提供しています。
Reactのコンポーネント設計は、イベントハンドラと呼ばれる特定の関数をコンポーネントに関連付けることで、ユーザーとの対話を管理します。

Reactにおけるイベントハンドリングの概要

プログラミングにおいて、イベントは非常に重要な概念です。
これは、ユーザーがアプリケーションと対話するための主要な手段となります。

イベントは、ユーザーがボタンをクリックしたり、入力欄にテキストを入力したり、マウスを移動したりするといったユーザーのアクションに反応します。

JavaScriptフレームワークの一つであるReactは、これらのユーザーイベントを効果的に管理するための専用のイベントハンドリングシステムを提供しています。

Reactには多くのイベントが存在しますが、ここではよく使用されるイベントに焦点を当ててみましょう。

Reactでよく使うイベントの種類とその使い方

Reactではさまざまな種類のイベントが使用できます。

その中から特に頻繁に使用されるものを取り上げ、それぞれがどのように機能し、どのように使用するのかを説明していきます。

onClickイベント

onClickは、ユーザーが要素をマウスでクリックしたときに発生するイベントです。
ボタンがクリックされたときに特定のアクションを起動するのによく使用されます。

次の例では、ボタンがクリックされたときにアラートメッセージを表示します。

function Button() {
  function handleClick() {
    alert('ボタンがクリックされました!');
  }

  return (
    <button onClick={handleClick}>
      クリックしてみてください
    </button>
  );
}

このコードでは、ボタンがクリックされるとhandleClick関数が実行されます。
その結果、ブラウザのアラートウィンドウにメッセージが表示されます。

onClickイベントの応用例：カウンターの作成

onClickイベントは、ボタンクリックに応じて値を増減させるカウンターのようなアプリケーションを作成する際にも役立ちます。
次に示すのは、その一例です。

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <button onClick={incrementCount}>増加</button>
    </div>
  );
}

export default Counter;

ここでは、useStateフックを使用してcountという状態を保持し、それをボタンがクリックされるたびに増加させるようにしています。

onChangeイベント

onChangeは、ユーザーが入力欄にテキストを入力したり、選択欄で選択肢を選んだりしたときに発生するイベントです。
入力値が変更されたときに何らかの動作を行う場合に使用します。

次の例では、テキストフィールドの入力値が変更されるとその値がコンソールに表示されます。

function TextField() {
  function handleChange(event) {
    console.log('入力値:', event.target.value);
  }

  return (
    <input type="text" onChange={handleChange} />
  );
}

このコードでは、テキストフィールドの値が変更されるたびに、handleChange関数が実行されます。
その結果、現在の入力値がブラウザのコンソールに表示されます。

onChangeイベントの応用例：リアルタイム検索

onChangeイベントは、ユーザーの入力にリアルタイムで反応する機能を作成するのにも有効です。
例えば、ユーザーがテキストボックスに文字を入力するたびに検索結果を更新する、リアルタイム検索機能を実装することが可能です。

onSubmitイベント

onSubmitは、ユーザーがフォームを送信するとき（例えば、送信ボタンをクリックしたとき）に発生するイベントです。
フォームの送信動作をカスタマイズする場合に使用します。

次の例では、フォームが送信されるとその事実がコンソールに表示されます。

function Form() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log('フォームが送信されました');
  }

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

このコードでは、フォームが送信されるとhandleSubmit関数が実行されます。
その結果、”フォームが送信されました”というメッセージがブラウザのコンソールに表示されます。