Reactのイベントハンドラ入門

Reactでよく使われるイベントハンドラを初心者にもわかりやすく解説し、コードの例を交えて紹介します。

1. イベントハンドラとは

イベントハンドラは、ユーザーアクションやデータ変更など、特定のイベントが発生したときに実行される関数です。Reactでは、イベントハンドラを使ってコンポーネントのインタラクションを制御します。

2. イベントハンドラの使い方

Reactでは、イベントハンドラはcamelCaseで記述し、JSX要素の属性として指定します。関数を定義し、イベントハンドラとして要素に紐付けます。

例: ボタンクリックイベント

import React from 'react';

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

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

export default App;

上記の例では、handleClick関数がイベントハンドラとして定義され、onClick属性でボタン要素に紐付けられています。

3. よく使われるイベントハンドラ

3.1. onClick

onClickは、クリックイベントを検出するイベントハンドラです。ボタンやリンクなど、要素がクリックされたときに実行されます。

3.2. onChange

onChangeは、入力要素の値が変更されたときに発火するイベントハンドラです。テキストボックスやチェックボックスなどで使われます。

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

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

export default App;

3.3. onSubmit

onSubmitは、フォームが送信されたときに発火するイベントハンドラです。フォームの送信処理を制御する場合に使用します。

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`送信内容: ${text}`);
    setText('');
  }

  function handleChange(event) {
    setText(event.target.value);
  }

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

export default App;

上記の例では、handleSubmit関数がonSubmitイベントハンドラとして定義されており、フォームが送信されると実行されます。event.preventDefault()を使って、デフォルトの送信処理をキャンセルしています。

まとめ

Reactのイベントハンドラは、コンポーネントのインタラクションを制御するために使用されます。よく使われるイベントハンドラには、onClick（クリックイベント）、onChange（入力要素の値変更イベント）、onSubmit（フォーム送信イベント）などがあります。これらのイベントハンドラを使いこなすことで、様々なユーザーアクションに対応したアプリケーションを開発することができます。