1. イベントハンドラが呼ばれない

Reactで

2. thisがundefinedになる

クラスコンポーネントでイベントハンドラを使う場合、thisがundefinedになることがあります。これは関数がコンポーネントに正しくバインドされていないためです。解決方法は、コンストラクタでbindを使うか、アロー関数を利用することです。


import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "こんにちは！" };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ message: "ボタンがクリックされました！" });
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={this.handleClick}>クリックしてみよう</button>
      </div>
    );
  }
}

export default App;

（アロー関数を使う場合はbindが不要になります）

3. イベントに引数を渡したい場合のエラー

イベントハンドラに引数を渡そうとして直接呼び出すと、レンダリング時に実行されてしまいます。これを防ぐには、無名関数（アロー関数）でラップして渡す方法があります。


<button onClick={() => handleClick("Hello")}>クリック</button>

（こうすることで、ボタンが押されたときだけhandleClickが呼ばれます）

4. フォームでのpreventDefault忘れ

フォーム送信ボタンを押すとページがリロードされることがあります。これはブラウザのデフォルト動作で、ReactではpreventDefaultを使って防ぐ必要があります。


const handleSubmit = (event) => {
  event.preventDefault();
  console.log("フォーム送信処理");
};

（event.preventDefault()を使うことで、ページがリロードされずにReactの処理だけが実行されます）

5. その他のよくあるエラーと確認ポイント

イベント名のスペルミス（onClickやonChangeなどは正確に記述する）
関数を呼び出すのではなく、関数を渡すこと（handleClick()ではなくhandleClick）
Stateの更新関数やuseStateの返り値を正しく使う
クラスコンポーネントではthisの扱いに注意

これらのポイントを押さえることで、Reactでのイベントハンドリングエラーを防ぎ、スムーズにUI操作ができるようになります。

まとめ

Reactのイベントハンドリングを総合的に振り返ろう

今回の記事では、Reactのイベントハンドリングで初心者が特につまずきやすいエラーと、その具体的な解決方法について詳しく学んできました。 Reactにおけるイベント処理は、ボタンのクリック、フォームの送信、入力欄の変更など、ユーザー操作と画面の動きをつなぐ非常に重要な要素です。そのため、イベントハンドリングの理解が浅いと「ボタンを押しても何も起きない」「エラーが出て画面が止まる」といった問題に直面しやすくなります。逆に言えば、ここで紹介した基本的な考え方を押さえるだけで、Reactアプリの安定性と操作性は大きく向上します。

まず最も重要なポイントは、「イベントには関数をそのまま渡す」という考え方です。 onClickやonChangeなどのイベント属性に対して、関数を実行する形で書いてしまうと、画面表示のタイミングで処理が走ってしまいます。これが「クリックしても動かない」「勝手に処理が実行される」といったトラブルの原因になります。 Reactでは、イベントが発生したときに初めて関数が呼ばれるよう、関数名だけを指定することが基本ルールです。

次に、クラスコンポーネントで頻出するthisの問題も、初心者が必ず一度は通る道と言えるでしょう。 thisがundefinedになる原因は、イベントハンドラがコンポーネントのインスタンスと正しく結び付いていないことにあります。 constructor内でbindを行う、もしくはアロー関数を使うことで、この問題は確実に防ぐことができます。現在では関数コンポーネントとフックが主流ですが、既存のコードや学習の過程でクラス構文に触れる機会もあるため、基本として理解しておく価値は十分にあります。

引数付きイベントとフォーム処理の重要ポイント

イベントハンドラに引数を渡したい場面も、React開発では非常によくあります。例えば、どのボタンが押されたか、どのデータを操作するかといった情報を関数に渡したい場合です。このとき、アロー関数でラップして渡す方法を理解していないと、意図しないタイミングで処理が実行されてしまいます。「クリックされたときだけ実行する」というReactイベントの基本的な流れを意識しながら、無名関数を使う習慣を身につけることが大切です。

また、フォーム送信時のpreventDefaultも非常に重要なポイントです。 Reactでフォームを扱う際、ブラウザのデフォルト動作をそのままにしておくと、ページがリロードされてしまい、状態や入力内容が消えてしまいます。 event.preventDefaultを正しく使うことで、React側の処理だけを実行し、スムーズなユーザー体験を実現できます。ログインフォームや検索フォームなど、実践的なアプリでは必須の知識と言えるでしょう。

まとめとしてのサンプルプログラム

ここで、今回学んだイベントハンドリングの基本を確認するために、シンプルなサンプルプログラムを振り返ってみましょう。関数を直接渡すこと、状態を更新する流れ、イベントオブジェクトの扱いなどが一目で分かる構成になっています。


import React, { useState } from "react";

function EventSample() {
  const [text, setText] = useState("未クリック");

  const handleClick = () => {
    setText("ボタンが押されました");
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setText("フォームが送信されました");
  };

  return (
    <div>
      <h2>{text}</h2>
      <button onClick={handleClick}>クリック</button>
      <form onSubmit={handleSubmit}>
        <button type="submit">送信</button>
      </form>
    </div>
  );
}

export default EventSample;

このように、Reactのイベントハンドリングは基本ルールさえ理解できれば、決して難しいものではありません。小さなサンプルを動かしながら、イベントと画面の変化の関係を体感することが、理解を深める近道です。

先生と生徒の振り返り会話

生徒

「イベントが動かない原因って、意外と基本的な書き方のミスが多いんですね。関数を呼び出してしまっていたのが原因だと分かりました。」

先生

「そうですね。Reactのイベントハンドリングは、仕組みを知るととてもシンプルです。なぜ動かないのかを一つずつ確認できるようになると、デバッグ力も自然と身についてきます。」

生徒

「thisのエラーやpreventDefaultの意味も、やっと理解できました。今まで何となく書いていた部分が、ちゃんと理由付きで分かるようになりました。」

先生

「それはとても良い成長ですね。イベント処理はReactの土台になる部分なので、ここをしっかり押さえておくと、これからフォームや一覧画面、複雑な操作も自信を持って作れるようになりますよ。」

生徒

「次はエラーが出ても、落ち着いて原因を探せそうです。」