React项目中输入框自动激活（autofocus无效）问题求助

如果原生的autofocus属性没效果，试试用React的Ref结合生命周期/副作用钩子手动触发聚焦，这比原生属性更可靠，尤其是在复杂组件场景下：

函数组件方案 #

用useRef获取输入框DOM元素，在组件挂载完成后调用focus()：

import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  // 创建ref关联input元素
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载后立即聚焦，可选链避免null报错
    inputRef.current?.focus();
  }, []); // 空依赖确保只执行一次

  return <input ref={inputRef} type="text" placeholder="直接输入试试" />;
}

类组件方案 #

用createRef创建引用，在componentDidMount生命周期钩子中触发聚焦：

import React from 'react';

class AutoFocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current?.focus();
  }

  render() {
    return <input ref={this.inputRef} type="text" placeholder="直接输入试试" />;
  }
}

为什么autofocus会失效？ #

• 输入框是条件渲染的（比如依赖某个state显示）：原生autofocus只在元素首次插入DOM时生效，条件满足后才渲染的话不会触发。
• 页面存在多个带autofocus的元素：浏览器只会优先聚焦最后一个插入DOM的元素，导致其他元素的autofocus失效。
• 部分浏览器插件或自定义UI组件库，可能会干扰原生autofocus的默认行为。

内容的提问来源于stack exchange，提问作者Hilary