はじめに｜Reactのイベント処理で僕がつまずいた話
前回は useEffect について解説しました。
状態と副作用の関係がわかるとアプリの動きが理解できるようになりましたが、次に僕がぶつかった壁は 「イベント処理」 でした。
「ボタンをクリックしても動かない！」
「入力した値が表示されない！」
最初はHTMLと同じ感覚で書いてしまい、何度もエラーに悩まされたのを覚えています。
でもReactでのイベント処理はルールを押さえればシンプルです。
この記事では、初心者の方が混乱しやすい クリックイベント と フォーム入力イベント を中心に解説します。
Reactのイベント処理とは？
Reactでは、ユーザーの操作（クリック・入力・変更など）を イベント として扱います。
ただしHTMLのイベント処理とは少し違います。
HTML
<button onclick="handleClick()">Click</button>React
<button onClick={handleClick}>Click</button>大きな違いは次の3つです。
- キャメルケースを使う（
onClick、onChangeなど） - 関数を文字列ではなく直接渡す
- 仮想DOM上でイベントが処理される
Reactでクリックイベントを扱う方法
Reactのクリックイベントは、
クリック→ハンドラ→setState→UI 更新
というデータフローになります。
コード全文（App.js）
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleClick}>+1</button>
</div>
);
}
export default App;抜粋＆解説
const handleClick = () => {
setCount(count + 1);
};handleClickという関数を定義setCountを呼び出して状態を更新
<button onClick={handleClick}>+1</button>- HTMLでは
onclick="..."と書きますが、ReactではonClick={関数}と書きます onClick={handleClick}とすることで、関数を「参照」として渡している
初心者がつまずくポイント
onClick={handleClick()}と書いてしまう → 関数がすぐ実行されてしまう- 正しくは
onClick={handleClick}と「関数そのもの」を渡す
Reactでフォーム入力イベントを扱う方法
コード全文（App.js）
import { useState } from "react";
function App() {
const [text, setText] = useState("");
const handleChange = (e) => {
setText(e.target.value);
};
return (
<div>
<input type="text" value={text} onChange={handleChange} />
<p>入力した文字: {text}</p>
</div>
);
}
export default App;抜粋＆解説
const [text, setText] = useState("");- 入力内容を
textという状態で管理 - 初期値は空文字
""
const handleChange = (e) => {
setText(e.target.value);
};onChangeイベントで入力内容を受け取るe.target.valueは「入力された文字列」
<input type="text" value={text} onChange={handleChange} />value={text}で状態を入力欄に反映onChange={handleChange}で入力を更新
初心者がつまずくポイント
valueを指定しないと「制御されない入力欄」になり、Reactらしく管理できない- Reactでは必ず
valueとonChangeをセットで書く
Reactイベント処理で初心者がつまずくポイントまとめ
コードの記法でいうと、大きな違いとしては以下のあたりかなと思います。
- 属性名はキャメルケース（
onClick、onChange） - 関数を直接渡す（
onClick={handleClick}） - フォーム入力は
valueとonChangeをセットで使う
まとめ｜Reactイベント処理の基本を押さえよう
Reactのイベント処理はHTMLと似ているけれど、書き方のルールが違うことが分かったかと思います。
- クリックイベント：関数をそのまま渡す
- フォーム入力イベント：
valueとonChangeを組み合わせる
イベント処理をマスターすると、アプリに「動き」をつけるのが楽しくなります！
僕自身、最初は「動かない！」と何度も悩みましたが、ポイントを理解してからはすぐ書けるようになりました。