Web

受控组件 = React当老板 输入框的值完全由React state控制，必须配套：有value就必须有onChange 实时同步：每打一个字，state就更新，组件就重新渲染 受控组件：React控制一切 const [text, setText] = useState(''); <input value={text} // React说：你的值是这个 onChange={(e) => setText(e.target.value)} // 用户输入时，React更新state /> 非受控组件 = DOM当老板 DOM说了算，输入框的值由浏览器DOM管理，React只是看客，需要的时候通过ref去DOM那里要值 懒得管理，React不关心你输入什么，需要时才去看 const inputRef = useRef(); <input ref={inputRef} // 给input一个引用 defaultValue="初始值" // 只设置初始值，之后DOM自己管 /> 总结 受控 = value + onChange（缺一不可） 非受控 = ref + defaultValue（要值时去DOM要） file类型永远非受控（文件只能通过DOM获取） 什么时候用哪个？ 需要实时验证 → 用受控（比如密码长度检查） 简单表单提交 → 用非受控（比如登录表单） 文件上传 → 必须非受控（file类型限制）