イベント処理 — onClick と onChange

イベント=「ユーザーの操作」に反応する

ボタンをクリックした、入力欄に文字を打った、といったユーザーの操作をイベントと呼びます。Reactでは、こうした操作に「そのとき動かしたい関数」を結びつけます。もっともよく使うのがクリックのonClickと、入力変化のonChangeです。玄関の呼び鈴にたとえると、onClickは「押されたら鳴らす仕掛けをセットしておく」ことに当たります。

const [count, setCount] = useState(0);
return (
  <button onClick={() => setCount(count + 1)}>
    {count} 回クリックされました
  </button>
);

最重要:渡すのは「関数」であって「呼び出した結果」ではない

ここがイベントで一番つまずくところです。onClickには「クリックされたら実行してね」という関数そのものを渡します。Reactが預かっておいて、クリックされた瞬間に呼び出してくれます。呼び出しは「あなた」ではなく「React」がやる、という感覚が大事です。

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

// 書き方1:名前の付いた関数を「そのまま」渡す
<button onClick={handleClick}>+1</button>

// 書き方2:その場でアロー関数を作って渡す(引数を渡したいとき便利)
<button onClick={() => setCount(count + 1)}>+1</button>

<button onClick={handleClick()}>+1</button>

<button onClick={handleClick}>+1</button>

onChange:入力の変化を受け取る

入力欄(input)では、文字が変わるたびにonChangeが呼ばれます。渡した関数はイベント情報(e)を受け取り、e.target.valueで「今入力欄に入っている文字」を取り出せます。それをstateに入れれば、入力とstateが常に同期します。

const [name, setName] = useState("");
return (
  <input
    value={name}
    onChange={(e) => setName(e.target.value)}
    placeholder="名前を入力"
  />
);

• onClickはクリック、onChangeは入力変化に反応する
• イベントには「関数そのもの」を渡す(呼び出した結果ではない)
• onClick={fn} は正しい、onClick={fn()} は描画時に実行されてしまう
• 引数を渡したいときは () => fn(引数) のようにアロー関数で包む