react中autofocus属性基本无效，因其仅是jsx提示且依赖dom解析时触发，而react挂载发生在js运行时；必须用useref+useeffect手动聚焦，并注意可见性、ios手势限制及焦点冲突。

React里写autoFocus属性基本没用

React的autoFocus（注意大小写）是JSX里模拟原生autofocus的写法，但它只是个“提示”，最终仍依赖浏览器在DOM解析时触发——而React组件挂载是JS运行时行为，DOM早已构建完毕。所以哪怕你写了<input autofocus>，在useState切换、useEffect条件渲染、路由跳转后重新挂载等场景下，焦点大概率不会出现。

常见现象：document.activeElement始终是body；控制台无报错但光标不动；服务端渲染（SSR）后hydrate，客户端不聚焦。

用useRef + useEffect手动聚焦才可靠

必须确保元素已挂载、可见、未被禁用，且避开iOS Safari的手势限制。推荐写法：

const inputRef = useRef(null);

useEffect(() => {
  const input = inputRef.current;
  if (!input || document.activeElement === input) return;

  // 检查可见性
  const style = getComputedStyle(input);
  if (style.display === 'none' || style.visibility === 'hidden') return;

  // iOS Safari要求focus()在用户手势同步上下文中调用
  // 所以模态框/弹窗打开若由按钮点击触发，应在该事件里调，而非useEffect
  requestAnimationFrame(() => {
    input.focus({ preventScroll: true });
  });
}, []);

• requestAnimationFrame比setTimeout(() => ..., 0)更稳妥，能避开CSS transition未结束或渲染未完成的时机
• 加{ preventScroll: true }避免页面意外滚动
• 务必检查document.activeElement === input，防止覆盖用户当前操作
• 若组件可能被v-if（Vue）或{show && <form>}</form>（React）条件渲染，ref绑定前需确认DOM节点存在

多个焦点目标共存时容易踩坑

HTML规范只允许一个autofocus生效，但React里没人管这个——你可能在不同组件里都写了autoFocus，或服务端返回的HTML里已有autofocus，客户端JS又调了一次focus()，结果焦点来回跳、软键盘反复弹收。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

解决办法很简单：

• 删掉所有autoFocus JSX属性和autofocus HTML属性
• 统一用JS控制，且只在一个明确入口点调用focus()
• 比如登录弹窗，就在onOpen回调里聚焦，而不是在组件内部useEffect里盲目执行
• SPA路由跳转后想聚焦，监听history的popstate或框架的afterEach钩子，别只靠组件挂载

iOS Safari上focus()必须绑定用户手势

这是最常被忽略的硬性限制：iOS Safari会静默忽略非用户手势触发的focus()，哪怕元素完全符合聚焦条件。

这意味着：

• useEffect(() => ref.current?.focus(), [])在iOS上基本无效
• 模态框由onClick打开，就必须把input.focus()写在那个onClick回调里，不能延迟到组件挂载后再执行
• 路由跳转若由<link>点击触发，可在Link的onClick中提前保存焦点意图，跳转后立即执行
• 没有用户手势？那就别强求自动聚焦——尤其表单非核心操作时，宁可让用户主动点一下

真正麻烦的不是怎么写代码，而是判断“此刻是否允许聚焦”：它取决于元素是否挂载、是否可见、是否可交互，以及当前执行上下文是否来自用户点击或触摸。漏掉任一环，focus()就变成无声的空操作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！