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

非受控组件指表单元素值由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 渲染，不触发重绘）

ref 怎么正确创建和使用

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

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

什么时候该用非受控组件

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

标签： react javascript java html 重绘