悠悠楠杉
网站页面
ReactuseRef与多输入框焦点管理：理解与实践
11/15
在构建现代 Web 应用时，表单是用户与系统交互的核心环节。尤其在涉及多个输入字段的场景中，良好的焦点管理不仅能提升用户体验，还能减少用户的操作负担。比如，在填写验证码、银行卡号或手机号分段输入时，我们常看到一个输入框填满后自动跳转到下一个。这种流畅的交互背后，离不开对 DOM 元素的精准控制——而 useRef 正是实现这一功能的关键工具。
useRef 是 React 提供的一个钩子，它返回一个可变的引用对象，其 .current 属性可以保存任意可变值，类似于类组件中的实例属性。与状态（state）不同的是，修改 ref 不会触发组件重新渲染。这使得 useRef 成为访问和操作 DOM 元素的理想选择，尤其是在需要直接操控输入框焦点的场景中。
假设我们有一个由四个独立输入框组成的四位验证码输入区域。每个输入框只允许输入一位数字，当用户输入完成后，焦点应自动移至下一个输入框。传统做法可能依赖全局变量或通过类组件的 createRef，但在函数式组件盛行的今天，useRef 提供了更简洁、直观的解决方案。
首先，我们需要创建一组 ref 来分别指向每一个输入框。虽然可以手动声明多个 useRef()，但更优雅的方式是使用数组来存储这些引用：
jsx
const inputRefs = useRef([]);
接着，在渲染时将每个 input 的 ref 属性绑定到数组中的对应位置：
jsx
{[0, 1, 2, 3].map((index) => (
<input
key={index}
ref={(el) => (inputRefs.current[index] = el)}
maxLength="1"
onChange={(e) => {
const value = e.target.value;
if (value && index < 3) {
inputRefs.current[index + 1]?.focus();
}
}}
/>
))}
这里的关键在于 ref 回调函数的使用。由于 useRef() 返回的是单一对象，我们不能直接用 useRef() 创建数组引用，而是通过回调形式动态地将每个 DOM 节点赋值给 inputRefs.current 数组的指定位置。这样，我们就拥有了对所有输入框的直接访问能力。
当用户在第一个输入框中输入内容后，onChange 事件被触发。我们检查输入值是否存在，并判断是否还有下一个输入框。如果有，就调用其 focus() 方法，实现自动聚焦。整个过程无需状态更新，响应迅速且自然。
此外，useRef 还能处理更复杂的场景。例如，当用户按下删除键且当前输入为空时，应将焦点退回至上一个输入框：
jsx
onKeyDown={(e) => {
if (e.key === 'Backspace' && !e.target.value && index > 0) {
inputRefs.current[index - 1]?.focus();
}
}}
这样的逻辑让输入行为更加贴近原生应用体验，用户无需频繁使用鼠标或方向键即可完成编辑。
值得注意的是，尽管 useRef 提供了对 DOM 的直接访问，但它并不意味着我们应该滥用这种“命令式”操作。React 的设计理念仍以声明式为主，useRef 应仅用于那些无法通过状态和 props 妥善处理的边缘情况，如动画、第三方库集成或像本文所述的焦点控制。
在实际项目中，还可以进一步封装此类逻辑，将其抽象为自定义 Hook，比如 useFocusGroup，以便在多个表单间复用。这不仅提升了代码的可维护性，也体现了 React 组合思想的精髓。
总之，useRef 并非只是一个“获取 DOM”的工具，它是连接声明式 UI 与底层 DOM 操作的桥梁。在多输入框焦点管理这类细节交互中，合理运用 useRef，能让表单体验从“能用”跃升至“好用”。掌握它的本质与边界，是每位 React 开发者迈向精细交互设计的重要一步。
