公司的 SEO与网站建设,做ar的网站,域名到期 网站打不开,中信建设有限责任公司工会#x1f399; 欢迎来到《前端达人 播客书单》第 23 期。 视频版#xff08;播客风格更精彩#xff09; 今天我们聚焦一个「写前端永远逃不掉」的主题#xff1a;表单处理。 你有没有遇到过这些问题#xff1a; 表单怎么一改就卡#xff1f;state 是不是用错了#xff1… 欢迎来到《前端达人 · 播客书单》第 23 期。 视频版播客风格更精彩 今天我们聚焦一个「写前端永远逃不掉」的主题表单处理。 你有没有遇到过这些问题 表单怎么一改就卡state 是不是用错了有时候 value 控不住输入框直接报错面试被问“受控和非受控的区别”说不清楚 别急这一期我们就用真实例子 背后原理一次性理清楚 React 中的表单处理逻辑带你站在更工程化的视角看表单。 一、问题导入React 的表单处理为什么需要重新发明轮子 在原生 HTML 中表单元素比如 input自带内部状态 你填了什么浏览器记着你点了提交浏览器打包给后端。 但到了 React“组件状态要统一由你来掌控”这就带来一个问题 要不要把 input 的值也交给组件 state 管 这时候你就面临选择 做法特点受控组件React 负责存 改值value 受 state 控制非受控组件浏览器 DOM 自己管理React 只负责“拿一下” 很多初学者会觉得“我只是个输入框哪来那么复杂”但其实——写 React 表单没写好是最容易留下 bug 的地方之一。 二、核心定义什么是受控字段、非受控字段 受控字段 Controlled Field React 完全掌控字段值配合 value onChange 实现数据同步。 每次用户输入触发 onChange → 调用 setState 更新值。下次 render 时value{state} 将新值绑定回组件。 非受控字段 Uncontrolled Field React 不管输入框的值用浏览器默认行为必要时通过 ref 获取 DOM 节点来拿值。 初始化用 defaultValue获取用 ref.current.value 一句话总结 Controlled 是“值存我这”Uncontrolled 是“值你自己管”。 三、使用方式与典型代码 ✅ 受控组件代码 const [name, setName] useState();inputtypetextvalue{name}onChange{e setName(e.target.value)}
/ 解释 value{name}值由组件状态决定onChange每次输入更新组件 stateReact 全程控制这个 input数据同步准确、可控性强 ✅ 非受控组件代码 const nameRef useRef();input typetext defaultValueTom ref{nameRef} /button onClick{() alert(nameRef.current.value)}提交
/button 解释 用 defaultValue 初始化值只作用于第一次渲染后续输入的值保存在 DOM 中提交按钮用 ref.current.value 获取当前值 四、工作机制受控与非受控的背后原理 Controlled 的思路React 的“统一状态来源”原则 在 React 中组件的 UI 函数(state) 所以任何用户行为最终都应该反映到 state 上形成闭环 State → Render UI → onChange Event → Update State 每次输入其实是两次操作 用户输入触发 onChange我们手动用 setState 改值再 render 回去 虽然多了一步但换来了 ✅ 状态统一管理 ✅ 更容易 debug 和回溯 ✅ 便于联动逻辑如禁用按钮、动态校验 Uncontrolled 的思路用浏览器原生行为节省性能 它就像「只读收件箱」 你不监听每一个字怎么输入你只关心“用户最终输入了什么” 适用于这种场景 你只在点击「提交」时需要值不需要做任何即时 UI 反馈 五、典型应用场景分析 场景推荐写法理由用户注册、登录Controlled需要实时反馈和验证文件上传Uncontrolledinput typefile 是只读字段表单仅用于一次性收集值Uncontrolled节省性能表单字段需要与其他组件状态联动Controlled更可维护使用 React Hook FormControlled ref混合更高效的封装形式 文件上传字段是一个经典案例 input typefile ref{fileRef} / 为什么不能用受控写法 因为 input typefile 的 value 是只读的 六、易错点提示 ⚠️ ❌ 新手常见误区 input valueabc / 不绑定 onChange 就写 valueReact 会警告你你让它受控了但不给它机会改变 ✅ 正确做法 const [value, setValue] useState(abc);
input value{value} onChange{e setValue(e.target.value)} / ✅ 常见对比总结 项目受控字段非受控字段控制权React stateDOM 自身使用场景表单联动、即时校验简单提交、上传文件性能会触发重新渲染不依赖组件更新调试性更容易统一 debug值存 DOM调试成本高 七、总结复盘 受控字段优先使用适合一切中大型表单⚙️ 非受控字段在“只读、轻量、特殊场景”中可以使用 Controlled 代表 React 哲学Uncontrolled 保留 HTML 本能 避免 value 无 onChange避免 file 字段用 state 控制 两者可以混合使用尤其在大型表单组件中如 React Hook Form 下期预告 下一期我们将上手使用社区最火的表单库之一 —— React Hook Form带你感受表单处理的极致简洁。 #React #React播客 #前端播客 #前端达人 #TypeScript
