多字段表单统一处理
表单字段一多，一个字段一个 useState 会很啰嗦。统一做法：把所有字段放进一个 state 对象，用事件对象的 e.target.name 做动态键名更新：setForm(prev => ({...prev, [name]: value}))。
React 18 的自动批处理让“输入即更新整个对象”也不会卡。字段特别多或校验复杂时再考虑 Formik / react-hook-form——它们的底层思路与此相同，只是替你管理了这部分重复代码。
- 多字段用对象 state + [name]: value 动态键更新
- 复选框注意取 e.target.checked，下拉取 e.target.value
- 复杂表单上 react-hook-form，但核心原理仍是受控/非受控
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多字段表单</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState } = React; function JoinForm() { const [form, setForm] = useState({ name: '', email: '', agree: false }); // 统一处理器：用 name 属性动态更新对应字段 function update(e) { const { name, value, type, checked } = e.target; setForm(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value })); } function submit(e) { e.preventDefault(); console.log('表单数据：', form); alert(JSON.stringify(form, null, 2)); } return ( <form onSubmit={submit} style={{ padding: 16 }}> <p><label>姓名 <input name="name" value={form.name} onChange={update} /></label></p> <p><label>邮箱 <input name="email" type="email" value={form.email} onChange={update} /></label></p> <p><label><input type="checkbox" name="agree" checked={form.agree} onChange={update} /> 同意协议</label></p> <button disabled={!form.agree}>提交</button> </form> ); } ReactDOM.createRoot(document.getElementById('root')).render(<JoinForm />); </script> </body> </html>
本节要点多字段表单：对象 state + [name] 动态键；checkbox 取 checked，其余取 value。
