在React开发中，输入框焦点丢失是一个常见但令人头疼的问题，通常发生在组件重新渲染或状态更新之后。当你正在输入内容，突然光标跳出输入框，或者焦点被莫名转移到其他元素上，这会严重影响用户体验。这种问题的根源主要与React的虚拟DOM更新机制有关，比如key属性动态变化导致组件被卸载再重新挂载、条件渲染时组件结构差异引发焦点重置、或者使用了非受控组件而缺少稳定的标识。下面我们先从最常见的一个场景入手，看看如何一步步排查和修复。
为什么会发生焦点丢失？
要解决焦点丢失问题，首先得理解它的触发机制。React在进行diff比较时，如果发现某个组件或元素的key发生了变化，会直接销毁旧组件并创建新实例。这样一来，原来输入框的DOM节点被移除，浏览器自然会把焦点从该元素上移除，通常回到body上。另外，在条件渲染中，如果两个分支返回的JSX结构不同，比如一个分支包含输入框，另一个分支没有，React也会重新挂载输入框，导致焦点丢失。非受控组件（使用defaultValue而非value）也会因为组件重新挂载而丢失用户已输入的内容和焦点。
场景一：key属性动态变化导致焦点丢失
这是最常见的原因。下面这段代码中，每次点击按钮增加count时，输入框的key会重新生成，导致输入框被卸载再挂载，焦点自然丢失。
import React, { useState } from 'react';
function ProblematicInput() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<div>
<!-- 每次渲染key都不一样，导致输入框重建 -->
<input
key={Math.random()}
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button onClick={() => setCount(count + 1)}>点击: {count}</button>
</div>
);
}
解决方案很简单：移除动态的key，或者使用一个稳定不变的标识（如固定的字符串）。如果确实需要根据状态切换不同的输入框，可以改用条件渲染并附加固定key。
import React, { useState } from 'react';
function FixedInput() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<div>
<!-- 使用固定key或者不传key -->
<input
key="my-input"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button onClick={() => setCount(count + 1)}>点击: {count}</button>
</div>
);
}
场景二：条件渲染导致组件被替换
当条件渲染切换时，如果前后JSX结构不同，React会销毁旧的DOM并创建新的。例如一个表单组件，根据isEdit状态显示不同布局，输入框就会重建。
import React, { useState } from 'react';
function ConditionRenderInput() {
const [isEdit, setIsEdit] = useState(false);
const [name, setName] = useState('');
return (
<div>
{isEdit ? (
<div key="edit-mode">
<input value={name} onChange={(e) => setName(e.target.value)} />
</div>
) : (
<div key="view-mode">
<span>{name}</span>
<button onClick={() => setIsEdit(true)}>编辑</button>
</div>
)}
</div>
);
}
上面的代码中，点击编辑按钮时，输入框从无到有，焦点不会自动定位。更糟糕的是，如果两个分支都包含输入框但结构不同，焦点也会丢失。解决办法是始终渲染输入框，通过控制显示隐藏（使用css隐藏而非条件渲染）来保留DOM节点，或者使用useEffect自动聚焦。
import React, { useState, useRef, useEffect } from 'react';
function ConditionFixedInput() {
const [isEdit, setIsEdit] = useState(false);
const [name, setName] = useState('');
const inputRef = useRef(null);
// 进入编辑模式时自动聚焦
useEffect(() => {
if (isEdit && inputRef.current) {
inputRef.current.focus();
}
}, [isEdit]);
return (
<div>
<input
ref={inputRef}
value={name}
onChange={(e) => setName(e.target.value)}
style={{ display: isEdit ? 'inline' : 'none' }}
/>
{!isEdit && (
<>
<span>{name}</span>
<button onClick={() => setIsEdit(true)}>编辑</button>
</>
)}
</div>
);
}
场景三：列表渲染中的焦点丢失
当渲染一个动态列表，每个列表项包含输入框时，如果列表顺序变化或使用不合适的key，会导致输入框焦点重置。例如使用数组索引作为key，当数组头部插入一项时，索引变化会导致所有输入框重建。正确做法是使用稳定且唯一的标识作为key，比如数据id。
import React, { useState } from 'react';
function ListInput() {
const [items, setItems] = useState([
{ id: 'a', text: '' },
{ id: 'b', text: '' },
]);
const addFirst = () => {
setItems([{ id: Date.now(), text: '' }, ...items]);
};
return (
<div>
<button onClick={addFirst}>在头部添加一项</button>
{items.map((item, index) => (
<!-- 使用id作为key，不要用index -->
<div key={item.id}>
<input
value={item.text}
onChange={(e) => {
const newItems = [...items];
newItems[index].text = e.target.value;
setItems(newItems);
}}
/>
</div>
))}
</div>
);
}
场景四：第三方组件或自定义Hook引起的焦点丢失
有时候焦点丢失并非直接由输入框本身引起，而是父组件中的某个操作触发了全局重新渲染，或者使用了类似react-router的路由切换导致页面组件卸载。这种情况下，可以在输入框所在的组件中使用useEffect在每次渲染后重新聚焦，或者使用useMemo、React.memo减少不必要的渲染。
import React, { useState, useRef, useEffect } from 'react';
function FocusSafeInput() {
const inputRef = useRef(null);
const [value, setValue] = useState('');
// 每次渲染后尝试聚焦（如果输入框没有焦点）
useEffect(() => {
if (inputRef.current && document.activeElement !== inputRef.current) {
// 我们可以根据需要决定是否强制聚焦
// 但为避免干扰用户手动切换焦点，通常只在特定条件触发
}
});
return <input ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} />;
}
总结最佳实践
- 使用稳定的key：无论在列表还是条件渲染中，key都应该是唯一且不会随渲染变化的标识（如数据id、固定字符串）。
- 受控组件优于非受控组件：受控组件通过state控制value，不容易出现因DOM重建导致的值丢失，但焦点丢失仍需配合key和useRef处理。
- 利用useRef保持DOM引用：通过ref获取输入框实例，在合适的时机（如useEffect内）调用focus()方法恢复焦点。
- 避免不必要的重新渲染：使用React.memo、useMemo、useCallback优化组件，减少父组件状态变化导致的子组件重渲染次数。
- 列表渲染使用id作为key：不要使用数组索引，尤其当列表顺序可能变化时。
通过以上分析和代码示例，你应该能快速定位并解决React组件中的输入框焦点丢失问题了。关键在于理解React的diff算法如何影响DOM节点的生命周期，并针对不同场景采取对应的策略。在实际项目中，建议从最简单的检查key开始，再逐步排查条件渲染和副作用的影响。