使用 useRef 管理非受控输入
在简单的表单场景中，通过 ref 而不是 state 访问 DOM 输入值。
使用 useRef 管理非受控输入 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
在本课中，您将使用带有 useRef 的非受控输入框访问 DOM 输入值，而无需在 React 状态中管理这些值。
受控与非受控
**受控输入框**的值由 React 状态驱动（值 + onChange）。**非受控输入框**在 DOM 中自行管理值；React 只在需要时通过 ref 读取它。
// Controlled
<input value={name} onChange={e => setName(e.target.value)} />
// Uncontrolled
const nameRef = useRef();
<input ref={nameRef} defaultValue="" />提交时读取值
对于非受控输入框，请在用户提交表单时通过访问 `ref.current.value` 读取值。用户输入期间不会发生状态更新。
function Form() {
const nameRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log(nameRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input ref={nameRef} />
<button type="submit">Submit</button>
</form>
);
}defaultValue 与值
对于非受控输入框，请使用 `defaultValue`（而不是 `value`）设置初始值。在没有 `onChange` 的情况下设置 `value` 会使 React 发出警告，并使输入框变为只读。
<input ref={nameRef} defaultValue="Initial text" />何时使用非受控输入框
非受控输入框适用于：只需在提交时获取值的简单表单、文件输入框（React 无法控制它们），以及注重性能且需要避免重新渲染的输入框。
重置非受控输入框
要重置非受控输入框，请以命令式方式设置 `ref.current.value = ''`。或者，修改组件的 `key` 属性，强制 React 使用新的 DOM 节点重新挂载该组件。
// Reset imperatively
nameRef.current.value = '';
// Or remount
setFormKey(k => k + 1);
<input key={formKey} ref={nameRef} />为多个输入框使用多个引用
对于包含多个非受控字段的表单，请为每个输入框创建单独的引用。在提交时访问每个引用的 `.current.value`。
const emailRef = useRef();
const passwordRef = useRef();
<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />挂载时聚焦
useRef 常用于在组件挂载时自动聚焦输入框。请在挂载后，在 useEffect 中读取该引用。
const inputRef = useRef();
useEffect(() => {
inputRef.current?.focus();
}, []);
<input ref={inputRef} />非受控输入框与验证
验证非受控输入框需要在提交时以命令式方式读取值。对于实时验证，这比受控输入框更加繁琐。如果需要即时反馈，请优先使用受控输入框。
useRef 的权衡
非受控输入框可以避免重新渲染，但会失去 React 的响应能力。如果不读取引用并手动更新状态，就无法根据输入值实时进行条件渲染。
快速检查
在 React 中，应使用哪个属性为非受控输入框设置初始值？
回顾
非受控输入框使用引用按需读取值。使用 defaultValue 设置初始值，在提交时读取 ref.current.value，并通过清除引用值或修改 key 来重置输入框。
接下来
下一课：**文件输入与文件数据读取**——您将处理文件输入框，并使用 FileReader 读取元数据和图像数据。
常见问题解答
「使用 useRef 管理非受控输入」课时是免费的吗？
是的 — 「使用 useRef 管理非受控输入」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「使用 useRef 管理非受控输入」这节课中我会学到什么？
在简单的表单场景中，通过 ref 而不是 state 访问 DOM 输入值。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「使用 useRef 管理非受控输入」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 useRef 管理非受控输入
- 文件输入与读取文件数据
- 拖放文件上传界面
- 向后端 API 上传文件