表单输入

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} 表示“没同意就不能点”

! 表示取反。用大白话读一遍就很好懂。多个条件用 || 连接（只要有一个不满足，就不能点）。