基礎

フォーム入力を扱う

なぜ学ぶか： 検索欄・ログインなど、フォームはアプリの入り口です。Reactには「入力値はstateで管理する」という独特の定石があり、AIのコードもほぼこの形です。まず形を見てください。

まずはこの例を見てみましょう

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

  return (
    <div>
      <input
        value={keyword}                              // 表示は state から
        onChange={(e) => setKeyword(e.target.value)} // 入力は state へ
      />
      <p>{keyword.length} 文字入力中</p>
    </div>
  );
}

「表示はstateから、変更はstateへ」の往復。入力のたびにstateが更新され、文字数もリアルタイムに変わります。

入力値をstateで管理する

入力欄の「今の文字」をstate（keyword）に持たせます。文字数表示のような「入力に連動する画面」が作れるのはこのためです。

valueとonChangeはセット

例のvalue={keyword}が表示、onChangeが更新。e.target.valueは「いま入力欄にある文字」です。

「文字が打てない」の定番原因

valueだけ書いてonChangeを忘れると、表示がstateに固定されて入力できなくなります。フォームバグの定番です。

送信はpreventDefaultで始まる

formの送信ではe.preventDefault()という1行で「ページ全体の再読み込み」という古い既定動作を止めます。お約束として覚えてOKです。

ステップ 1 / 3

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。