制御コンポーネント(フォームの値を React が握る)

入力欄の値を React の state で管理する

フォームの入力欄(input など)は、放っておくとブラウザ側が値を持ちます。React ではこれを「state に値を持たせ、input はその state を映すだけ」に変えるのが定番です。こうすると入力値の唯一の正解が state になり、React がフォームを握れます。この形を制御コンポーネントと呼びます。

作り方は2ステップです。1つ目、input の value に state を渡す(表示は常に state に従う)。2つ目、onChange で入力のたびに setState して state を更新する。これで「state → 表示」「入力 → state」が一周し、常に一致します。

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

onChange に渡す関数は、イベント e を受け取ります。入力された今の文字列は e.target.value で取れます。これを setName に渡すと state が更新され、再描画で value={name} が新しい値になり、画面に反映されます。

// React は値を把握していない
<input ref={inputRef} />
// 送信時に inputRef.current.value を取りに行く

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

フォームの送信も押さえておきます。<form> の onSubmit で送信を受け取りますが、そのままだとブラウザがページを再読み込みしてしまいます。これを止めるのが e.preventDefault() です。止めた上で、state に入っている値を使って処理します。

function SearchForm() {
  const [keyword, setKeyword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // ページ再読み込みを止める
    console.log("検索:", keyword);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <button type="submit">検索</button>
    </form>
  );
}

1. state を用意する(useState で入力値を持つ)
2. input の value に state を渡す(表示は state に従う)
3. onChange で e.target.value を setState して更新する
4. 送信は onSubmit で受け、先頭で e.preventDefault() を呼ぶ