在react函数组件中，useref hook常用于直接访问和操作dom元素，如管理输入框的焦点。然而，尝试同时聚焦多个输入框是无效的，因为dom一次只能聚焦一个元素。当连续对多个元素调用focus()方法时，焦点会依次转移，最终停留在最后一个被调用的元素上。理解这一核心dom行为对于正确实现输入框的焦点管理至关重要。
理解React useRef Hook
useRef 是React提供的一个用于在函数组件中创建可变引用的 Hook。它返回一个可变的 ref 对象，其 .current 属性可以被用来保存任何可变值，通常用于直接访问 DOM 元素或在组件的整个生命周期内持久化一个值而不会触发重新渲染。
useRef 在输入框中的应用
在表单处理中，useRef 常用于以下场景：
- 程序化聚焦 (Programmatic Focus)：当特定事件发生时（例如，点击按钮、组件加载），将焦点设置到某个输入框。
- 测量 DOM 元素：获取输入框的尺寸或位置。
- 直接调用 DOM 方法：例如 scrollIntoView()。
多输入框焦点管理的常见误区
开发者有时会尝试使用 useRef 来同时“激活”或“触发”多个输入框，例如，在一个按钮点击后，希望所有相关的输入框都能获得焦点。然而，这与 DOM 的基本焦点机制相悖。
考虑以下代码示例，它尝试在一个 useEffect 中同时聚焦多个输入框：
import React, { useState, useEffect, useRef } from 'react';
export const ConfigGalley = (props) => {
// ... 其他状态和逻辑 ...
const inputRef0 = useRef(null);
const inputRef1 = useRef(null);
const inputRef2 = useRef(null);
const inputRef3 = useRef(null);
const inputRef4 = useRef(null);
const [buttonClicked, setButtonClicked] = useState(false);
useEffect(() => {
if (buttonClicked) {
// 尝试同时聚焦多个输入框
inputRef0.current.focus();
inputRef1.current.focus();
inputRef2.current.focus();
inputRef3.current.focus();
inputRef4.current.focus();
}
}, [buttonClicked]);
const onClickNewGalley = () => {
// ... 重置状态 ...
setButtonClicked(!buttonClicked); // 触发 useEffect
};
return (
<div>
<button onClick={onClickNewGalley}>+ New Galley</button>
<input ref={inputRef0} type="text" placeholder="Name" />
<input ref={inputRef1} type="number" placeholder="Full Carts" />
<input ref={inputRef2} type="number" placeholder="Half Carts" />
<input ref={inputRef3} type="number" placeholder="SMU" />
<input ref={inputRef4} type="number" placeholder="Stowage" />
{/* ... 其他组件内容 ... */}
</div>
);
};在这个示例中，当 onClickNewGalley 被调用并更新 buttonClicked 状态时，useEffect 会被触发。在 useEffect 内部，代码尝试依次调用 inputRef0.current.focus()、inputRef1.current.focus() 等。
为什么只有最后一个输入框获得焦点？
问题的核心在于 DOM 的焦点机制：
- 单一焦点原则：在任何给定时间点，浏览器文档中只能有一个元素获得焦点。
- 焦点转移：当一个元素获得焦点时，之前获得焦点的元素会自动失去焦点。
因此，当上述 useEffect 代码执行时：
- inputRef0.current.focus() 被调用，第一个输入框获得焦点。
- 紧接着，inputRef1.current.focus() 被调用，第二个输入框获得焦点，此时第一个输入框失去焦点。
- 这个过程会持续进行，直到 inputRef4.current.focus() 被调用。
- 最终，只有 inputRef4 对应的输入框会保留焦点，因为它是最后一个被程序化聚焦的元素。
这就是为什么开发者会观察到只有最后一个输入框（在本例中是 inputRef4）起作用的原因。
正确的焦点管理策略
既然无法同时聚焦多个输入框，那么在多输入框场景下，我们应该如何合理地管理焦点呢？这取决于你的具体业务需求。
1. 聚焦首个或特定输入框
最常见的需求是在某个操作后，将焦点设置到表单的第一个输入框，或者根据逻辑聚焦到某个特定的输入框（例如，第一个有验证错误的输入框）。
示例：聚焦第一个输入框
如果你希望在点击“New Galley”后，焦点自动设置到“Name”输入框，只需聚焦 inputRef0 即可：
useEffect(() => {
if (buttonClicked && inputRef0.current) {
inputRef0.current.focus(); // 只聚焦第一个输入框
}
}, [buttonClicked]);2. 引导用户输入流程
如果你的目标是引导用户按顺序填写多个输入框，可以考虑在当前输入框完成输入或满足特定条件后，程序化地将焦点转移到下一个输入框。
示例：在输入完成后转移焦点
const handleNameChange = (e) => {
const { value } = e.target;
setState(prev => ({ ...prev, name: value }));
if (value.length > 0 && inputRef1.current) {
inputRef1.current.focus(); // 当名称输入后，自动聚焦到下一个输入框
}
};
// ... 在 JSX 中
<input
ref={inputRef0}
type="text"
placeholder="Name"
onChange={handleNameChange}
value={state.name || ''}
/>
<input
ref={inputRef1}
type="number"
placeholder="Full Carts"
onChange={onChange} // 其他输入框的通用 onChange
value={state.fullCarts || ''}
/>这种方式需要更精细的逻辑来判断何时转移焦点。
3. 处理输入验证和错误提示
如果“触发输入框”的目的是为了在数据验证失败时引起用户注意，那么聚焦并不是最佳方法。更好的做法是：
- 显示错误消息：在输入框下方或旁边显示清晰的验证错误信息。
- 样式高亮：通过 CSS 为有错误的输入框添加边框颜色、背景色等高亮样式。
- 聚焦第一个错误输入框：如果表单中有多个错误，可以聚焦到第一个有错误的输入框，方便用户从头开始修改。
4. 辅助性技术和可访问性
对于需要使用键盘导航的用户，浏览器默认的 Tab 键行为已经提供了很好的焦点管理。确保你的表单元素具有正确的 tabIndex 和语义化的 HTML 结构，以保证良好的可访问性。
总结
useRef 是 React 中一个强大的 Hook，用于直接操作 DOM。然而，在使用它管理输入框焦点时，务必牢记 DOM 的“单一焦点原则”。尝试同时聚焦多个输入框是无效的，只会导致焦点最终停留在最后一个被操作的元素上。根据具体的交互设计，选择合适的焦点管理策略，如聚焦首个输入框、按需转移焦点或通过视觉提示（如错误消息和高亮样式）来引导用户，才能构建出用户体验良好且符合预期的表单交互。
