イベント

onClick・onChange で操作を受け取る

ポイント

クリックは onClick、入力は onChange で受け取る。HTML の onclick と違い、2つ目の単語を大文字にする
渡すのは「あとで実行する関数」。onClick={handleClick} と、() を付けずに書く
引数を付けて呼びたいときは、() => で包む。onClick={() => setCount(0)}

試してみよう

import { useState } from "react"

export default function App() {
  const [message, setMessage] = useState("まだ押していません")

  function handleClick() {
    setMessage("押されました！")
  }

  return (
    <div style={{ padding: 16 }}>
      <button onClick={handleClick}>押してね</button>
      <p>{message}</p>
    </div>
  )
}

Open Sandbox

「元に戻す」ボタンを足して、メッセージを最初に戻してみよう
onClick を onMouseEnter に変えて、マウスを乗せただけで反応させてみよう
onClick={handleClick()} と () を付けると、どうなるか試してみよう

つまずきポイント

onClick={handleClick()} は、表示した瞬間に実行される

() を付けると「今すぐ実行した結果」を渡してしまう。onClick={handleClick} と関数そのものを渡す。

イベント用の関数は handle ＋動作で名付ける

handleClick、handleSubmit、handleReset のように名付けると、何をする関数か一目でわかる。実務でも定番。