非受控组件指表单元素值由DOM自身管理，不通过value/onChange交由React控制；用useRef创建ref绑定元素，以defaultValue/defaultChecked设初始值，通过ref.current.value读写值，适用于文件上传、需调用原生方法等场景。
非受控组件在 React 中指表单元素的值由 DOM 自身管理，而不是通过 value 和 onChange 交由 React 状态控制。实现它主要靠 ref 获取 DOM 节点，再手动读写值。
给表单元素（如 <input>、<textarea></textarea>、<select></select>）不设 value 属性，也不绑定 onChange；用 useRef 创建 ref，再通过 ref.current.value 读取或设置值。
defaultValue（输入框）或 defaultChecked（复选/单选），不是 value
ref.current.value 拿当前值，而不是从 state 里取ref.current.value = 'xxx'（注意：这会绕过 React 渲染，不触发重绘）函数组件中必须用 useRef Hook 创建 ref 对象，它的 .current 属性可读可写，且在整个组件生命周期内保持同一个引用。
const inputRef = useRef(null)
<input ref="{inputRef}" defaultvalue="hello">
inputRef.current.value（确保 ref 已挂载，比如在事件回调或 useEffect 里用）inputRef.current.focus()，适合表单校验失败后自动聚焦它适合简单场景或与原生 DOM 行为强耦合的需求，比如文件上传、富文本编辑器、第三方库集成等。
立即学习“Java免费学习笔记（深入）”；
.focus()、.select()、.setRangeText()
非受控组件一旦渲染，就不能再切回受控（即不能中途加 value），否则会报错 “A component is changing an uncontrolled input to be controlled”。反之亦然。
value 和 ref 控制同一个输入框defaultValue 只在首次渲染生效，后续 props 变化不会更新输入框值defaultValue 可能和 HTML 初始值不一致，需注意 hydration 差异ref.current.value
基本上就这些。非受控组件不复杂但容易忽略细节，用对场景才真正省事。
以上就是javascript如何实现非受控组件_ ref怎么用的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
680
收藏
