非受控组件指表单元素值由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 行为强耦合的需求，比如文件上传、富文本编辑器、第三方库集成等。
立即学习“Java免费学习笔记（深入）”；
表单字段极少更新，且不需要实时响应（如一次性提交的搜索框） 需要调用原生方法：.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
基本上就这些。非受控组件不复杂但容易忽略细节，用对场景才真正省事。
以上就是javascript如何实现非受控组件_ ref怎么用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543162.html
微信扫一扫 
支付宝扫一扫 
