Reactのイベント処理を解説！ボタンクリックでアプリを動かそう！【基本】

Reactでイベントを処理することで、ユーザーの操作に応じたアクションを実行できます。

イベント処理を使うと、ボタンクリックや入力フィールドの変更などに応じて、画面を更新したり、アクションを起こすことができます。

今回は、ボタンクリックを例に、Reactでのイベントハンドリングの基本を解説します。

イベント処理の基本

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

• キャメルケースで記述する必要があります（例：onclick → onClick）。
• イベントハンドラには、関数を渡す必要があります。
  例えば、ボタンクリックでメッセージを表示する基本的な例を見てみましょう。

import React from 'react';

function App() {
  function handleClick() {
    alert('Button was clicked!');
  }
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default App;

• onClickイベントを使って、ボタンがクリックされたときにhandleClick関数が呼ばれるようにしています。
• alertが表示され、メッセージが表示されます。

イベントハンドラとしての関数

イベントハンドラとして指定する関数は、通常外部に定義した関数や、アロー関数を使って記述します。

イベントハンドラ-外部関数を使う例：

function App() {
  function handleClick() {
    console.log('Button clicked!');
  }

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

イベントハンドラ-アロー関数で直接書く例：

function App() {
  return (
    <button onClick={() => console.log('Button clicked!')}>Click me</button>
  );
}

• 外部関数を使うと、コードが読みやすく、再利用が簡単です。小さなアクションならアロー関数で直接記述する方法も便利です。

イベントハンドラと状態管理

Reactでは、ボタンクリックなどのイベントに応じて状態（State）を更新し、UIを動的に変更することができます。

次は、ボタンクリックでカウンターを増加させる例です。

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

• useStateフックを使って、countという状態を作成し、初期値を0に設定しています。
• ボタンがクリックされるたびにsetCountでcountを1増やし、その結果が画面に反映されます。

複数のイベントを処理する

複数のイベントを扱う場合、それぞれのイベントに応じた関数を作成します。

以下は、増加と減少の2つのボタンでカウントを操作する例です。

import React, { useState } from 'react';

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

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

  function handleDecrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

• 2つのボタンそれぞれに異なるイベントハンドラ（handleIncrementとhandleDecrement）を設定しています。
• Incrementボタンでカウントが増加し、Decrementボタンで減少します。

イベントオブジェクトを使用する

イベントハンドラは、イベントの詳細が詰まったイベントオブジェクトを受け取ることができます。
このオブジェクトを使うことで、クリックされた要素やその情報にアクセス可能です。

function App() {
  function handleClick(event) {
    console.log(event.target); // クリックした要素が表示されます
  }

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

export default App;

• handleClick関数にeventを渡すことで、クリックイベントの詳細にアクセスできます。
• event.targetを使うと、クリックされた要素がコンソールに表示されます。

フォームのイベント処理

フォームのイベント処理も、Reactで頻繁に使用される場面です。

フォーム送信や入力値の取得を行う際も、イベントハンドラを設定します。

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

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

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Submitted value: ${inputValue}`);
  }

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

export default Form;

• onChangeイベントは、入力フィールドの変更に対応し、入力値をsetInputValueで更新します。
• onSubmitイベントでフォーム送信の処理をし、alertで送信された内容を表示しています。

まとめ

Reactのイベント処理を使うことで、アプリのインタラクションを豊かにできます。以下のポイントを押さえましょう。

• イベントハンドラはキャメルケース（例：onClick）で記述し、関数を渡す。
• イベントハンドラは、状態を更新するためにuseStateと一緒に使うことが多い。
• 複数のイベントに応じた関数を用意することで、インタラクションの幅が広がる。
• イベントオブジェクトを使うと、イベントの詳細にアクセス可能。
• フォームイベントは、onChangeとonSubmitを活用して入力管理ができる。

これらを活用して、インタラクティブなReactアプリを作成してみましょう！