javascript如何实现非受控组件_ ref怎么用

非受控组件指表单元素值由DOM自身管理，不通过value/onChange交由React控制；用useRef创建ref绑定元素，以defaultValue/defaultChecked设初始值，通过ref.current.value读写值，适用于文件上传、需调用原生方法等场景。

非受控组件在 React 中指表单元素的值由 DOM 自身管理，而不是通过 value 和 onChange 交由 React 状态控制。实现它主要靠 ref 获取 DOM 节点，再手动读写值。

非受控组件怎么写

给表单元素（如 、、）不设 value 属性，也不绑定 onChange；用 useRef 创建 ref，再通过 ref.current.value 读取或设置值。

• 初始值用 defaultValue（输入框）或 defaultChecked（复选/单选），不是 value
• 提交时通过 ref.current.value 拿当前值，而不是从 state 里取
• 需要动态设置值时，用 ref.current.value = 'xxx'（注意：这会绕过 React 渲染，不触发重绘）

ref 怎么正确创建和使用

函数组件中必须用 useRef Hook 创建 ref 对象，它的 .current 属性可读可写，且在整个组件生命周期内保持同一个引用。

• 写法：const inputRef = useRef(null)
• 绑定到元素：
• 获取值：inputRef.current.value（确保 ref 已挂载，比如在事件回调或 useEffect 里用）
• 聚焦示例：inputRef.current.focus()，适合表单校验失败后自动聚焦

什么时候该用非受控组件

它适合简单场景或与原生 DOM 行为强耦合的需求，比如文件上传、富文本编辑器、第三方库集成等。

• 表单字段极少更新，且不需要实时响应（如一次性提交的搜索框）
• 需要调用原生方法：.focus()、.select()、.setRangeText()
• 避免因频繁 setState 导致的性能开销（但多数情况影响极小，别过早优化）
• 与未适配 React 的老代码或插件共存时更自然

注意事项和常见坑

非受控组件一旦渲染，就不能再切回受控（即不能中途加 value），否则会报错 “A component is changing an uncontrolled input to be controlled”。反之亦然。

• 不要混用 value 和 ref 控制同一个输入框
• defaultValue 只在首次渲染生效，后续 props 变化不会更新输入框值
• 服务端渲染（SSR）下，defaultValue 可能和 HTML 初始值不一致，需注意 hydration 差异
• 测试时需模拟用户交互（如 fireEvent.change），而非直接改 ref.current.value

基本上就这些。非受控组件不复杂但容易忽略细节，用对场景才真正省事。