在React开发中，输入框连续输入时焦点丢失是表单场景下的高频问题，通常表现为用户每输入一个字符，输入框就会失去焦点，需要重新点击才能继续输入，严重影响使用体验。
问题产生的常见原因
要解决问题首先需要明确诱因，大部分焦点丢失问题都和以下两种情况相关：
- 组件每次状态更新时都重新创建了新的输入框元素，旧的输入框被卸载后新的输入框挂载，自然无法保留之前的焦点状态
- 输入框的key属性被设置为动态变化的值，React会认为每次更新都是不同的元素，触发卸载和重新挂载逻辑
解决方案一：正确使用受控组件
受控组件是React表单的推荐写法，核心是将输入框的值和状态绑定，通过onChange事件更新状态。错误的受控组件写法容易引发重渲染问题，以下是正确的实现示例：
import React, { useState } from 'react';
const InputComponent = () => {
// 定义输入框绑定的状态
const [inputValue, setInputValue] = useState('');
// 处理输入变化的函数
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="请输入内容"
/>
</div>
);
};
export default InputComponent;
上述写法中，输入框是稳定的元素，状态更新只会触发组件重新渲染，不会重新创建输入框，因此不会出现焦点丢失问题。
解决方案二：避免不必要的组件重渲染
如果输入框被包裹在父组件中，父组件的不必要更新也可能导致输入框被重新创建，此时可以使用React.memo或者useMemo来优化：
import React, { useState, useMemo } from 'react';
// 用React.memo包裹输入框组件，避免父组件更新时不必要的重渲染
const MemoInput = React.memo(({ value, onChange }) => {
return (
<input
type="text"
value={value}
onChange={onChange}
/>
);
});
const ParentComponent = () => {
const [inputValue, setInputValue] = useState('');
const [otherState, setOtherState] = useState(0);
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
// 用useMemo缓存输入框的props，避免每次渲染都生成新的引用
const inputProps = useMemo(() => ({
value: inputValue,
onChange: handleInputChange
}), [inputValue]);
return (
<div>
<MemoInput {...inputProps} />
<button onClick={() => setOtherState(otherState + 1)}>
更新其他状态
</button>
</div>
);
};
export default ParentComponent;
解决方案三：使用useRef维护输入框引用
如果是非受控组件场景，或者需要手动控制输入框焦点，可以使用useRef获取输入框的DOM引用，避免元素被重新创建：
import React, { useRef, useState } from 'react';
const RefInputComponent = () => {
const inputRef = useRef(null);
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
// 手动保持输入框焦点
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<input
ref={inputRef}
type="text"
value={inputValue}
onChange={handleInputChange}
/>
</div>
);
};
export default RefInputComponent;
注意事项
排查问题时可以重点检查以下几点：
- 输入框的key属性是否为固定值，不要使用动态变化的状态作为key
- 不要在每次渲染时都创建新的事件处理函数，尽量将函数缓存或者使用useCallback包裹
- 如果使用了列表渲染的输入框，确保每个输入框的key是唯一且稳定的
按照上述方法排查和优化，基本可以解决React输入框连续输入时焦点丢失的问题，保障表单输入流程的顺畅性。