React 表单与事件

登录框、搜索栏、注册页……表单负责收集用户输入，是组件交互的主角。与普通 HTML 不同，React 表单的推荐做法是「受控组件」：输入框的值由 state 决定，任何改动都经过事件处理函数，数据流向单一、可预测。本节把表单与事件一次讲透。

受控组件

把输入框的 value 绑定到 state，再用 onChange 更新 state，输入框就「受控」了——页面显示什么、能输成什么样，全部由代码说了算。

import { useState } from 'react';
export default function NameInput() {
  const [name, setName] = useState('');

  return (
    <input
      value={name}                           // 值来自 state
      onChange={(e) => setName(e.target.value)} // 每次敲键都更新
      placeholder="请输入用户名"
    />
  );
}

表单提交与事件对象

点击提交按钮时浏览器默认会刷新页面，必须先用 e.preventDefault() 拦下来，再自行处理数据。

function Login() {
  const [user, setUser] = useState({ name: '', pwd: '' });

  function handleChange(e) {
    // 借助 name 属性，一个函数处理所有输入框
    setUser({ ...user, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault(); // 阻止默认刷新
    console.log('提交内容：', user);
    // 输出：提交内容：{name: '张三', pwd: '123456'}
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={user.name} onChange={handleChange} />
      <input name="pwd" type="password" value={user.pwd} onChange={handleChange} />
      <button type="submit">登录</button>
    </form>
  );
}

文本域、下拉框与单选框

它们同样是受控写法：textarea 与 select 直接读 value，单选框通过 checked 判断选中。

function Profile() {
  const [form, setForm] = useState({ intro: '', city: 'beijing' });
  function set(k, v) {
    setForm({ ...form, [k]: v });
  }
  return (
    <>
      <textarea value={form.intro} onChange={(e) => set('intro', e.target.value)} />
      <select value={form.city} onChange={(e) => set('city', e.target.value)}>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
      </select>
      <p>已选城市：{form.city}</p>
    </>
  );
}

复选框与常用事件一览

复选框的选中状态存在 e.target.checked；其它常用事件还有 onClick、onFocus、onBlur、onKeyDown。

function Subscribe() {
  const [agree, setAgree] = useState(false);

  return (
    <label>
      <input type="checkbox" checked={agree}
        onChange={(e) => setAgree(e.target.checked)} />
      我已阅读并同意协议（当前：{agree ? '已勾选' : '未勾选'}）
    </label>
  );
}

小结

React 表单的核心是「受控」：value 配 onChange，state 是唯一数据源；提交时用 preventDefault 拦下默认刷新。文本域、下拉框、单选框只是换了取值字段，思路完全一致。