react实现自动聚焦
使用 autoFocus 属性
在 React 中，最简单的实现自动聚焦的方法是直接在输入元素上添加 autoFocus 属性。该属性会在组件挂载时自动聚焦到该元素。
<input type="text" autoFocus />注意：autoFocus 仅在初始渲染时生效，如果组件重新渲染（如状态更新），它不会再次触发。
使用 ref 和 useEffect 手动聚焦
如果需要更灵活的控制（例如在条件满足时聚焦），可以通过 useRef 和 useEffect 手动实现：
import React, { useRef, useEffect } from 'react';
function AutoFocusInput() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return <input type="text" ref={inputRef} />;
}动态条件聚焦
若需根据特定条件（如表单验证失败后重新聚焦），可以在 useEffect 中添加依赖项：
useEffect(() => {
if (shouldFocus && inputRef.current) {
inputRef.current.focus();
}
}, [shouldFocus]); // 依赖 shouldFocus 变化结合第三方库（如 react-focus-lock）
对于复杂场景（如模态框内的自动聚焦），可使用第三方库管理焦点。以下示例使用 react-focus-lock：
import FocusLock from 'react-focus-lock';
function Modal({ isOpen }) {
return (
isOpen && (
<FocusLock>
<input type="text" autoFocus />
</FocusLock>
)
);
}注意事项
- 无障碍性：自动聚焦可能影响屏幕阅读器用户，需确保行为符合可访问性标准（如提供跳过选项）。
- 移动端兼容性：某些移动浏览器可能限制自动聚焦行为，需测试目标平台。
- 竞态条件：在异步渲染（如数据加载后）中，确保 DOM 已渲染再调用
focus()。
