フォーム入力

value と onChange はセット

ポイント

入力欄の値は state で持つ。value={name} で表示し、onChange で更新する（制御コンポーネント）
value と onChange はセット。onChange がないと、文字が打てなくなる
チェックボックスは value ではなく checked、e.target.value ではなく e.target.checked を使う

試してみよう

import { useState } from "react"

export default function App() {
  const [name, setName] = useState("")
  const [agreed, setAgreed] = useState(false)

  return (
    <div style={{ padding: 16, display: "grid", gap: 12 }}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前"
      />
      <label>
        <input
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
        />
        利用規約に同意する
      </label>
      <button disabled={!name || !agreed}>送信する</button>
      <p>入力中：{name}</p>
    </div>
  )
}

Open Sandbox

onChange の行を消して、文字が打てなくなるのを確かめよう
メールアドレスの入力欄を足してみよう（state をもう1つ作る）
名前が空のとき「名前を入力してください」と赤く出してみよう（ヒント：&&）

つまずきポイント

value だけ書いて onChange を忘れる

value={name} で「表示は state の値」と決めているので、onChange で state を更新しないと、何を打っても元に戻る。

disabled={!agreed} は「同意していないなら押せない」

! で反対にしている。日本語にして読むとわかりやすい。複数の条件は || でつなぐ（どれか1つでも満たさなければ押せない）。