React | イベント処理：onClick / onChange を理解して実装できるようにする – 9/12

ReactのイベントはDOMイベントに似ていますが、書き方に独特のポイントがあります。ここでは頻出イベントの型を覚え、フォーム操作につなげます。

イベントの基本：関数を渡す

Reactではイベントハンドラに「関数」を渡します。

<button onClick={handleClick}>Click</button>

間違えやすいのが「関数を呼び出してしまう」パターンです。

NG：

<button onClick={handleClick()}>Click</button>

これはレンダー時に実行されてしまいます。

const [count, setCount] = useState(0)

const handleClick = () => {
  setCount(count + 1)
}

onClick={handleClick} と渡すだけで、クリック時に実行されます。

入力値は event から取り出します。

<input onChange={(e) => setText(e.target.value)} />

この e.target.value は「今入力されている文字列」です。

一覧の削除ボタンなどで「どれを削除するか」を渡したいときは、無名関数で包みます。

<button onClick={() => removeTodo(todo.id)}>削除</button>

この形を覚えると、イベント処理で困ることが減ります。