表單輸入

value 和 onChange 總是成對出現

重點

輸入欄位的值用 state 保存。用 value={name} 顯示，用 onChange 更新（受控元件）
value 和 onChange 要成對使用。沒有 onChange，就無法輸入文字
核取方塊用 checked 而不是 value，用 e.target.checked 而不是 e.target.value

動手試試

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）
名字是空的時候，用紅字顯示「請輸入名字」（提示：&&）

常見錯誤

只寫了 value，忘了 onChange

value={name} 規定了「顯示的是 state 的值」，所以如果不用 onChange 更新 state，輸入什麼都會被還原。

disabled={!agreed} 是「沒有同意就不能按」

! 表示相反。用白話唸一遍就很好懂。多個條件用 || 串起來（只要有一個不符合，就不能按）。