如何在React.js中实现页面加载或按钮点击时聚焦HTML select组件？

在React应用里直接用原生的autofocus属性或者DOMContentLoaded事件来给select设焦点经常会失效，核心原因是React的组件渲染时机和原生DOM加载事件的时机不匹配——当原生事件触发时，你的select组件可能还没挂载到DOM树上呢！

给你两个针对React场景的可靠解决方案，分别适配函数组件和类组件：

函数组件方案（使用useRef + useEffect） #

这是React 16.8+推荐的写法，利用useRef获取DOM元素引用，再通过useEffect在组件挂载完成后执行聚焦操作：

import { useRef, useEffect } from 'react';

function SearchSelector() {
  // 创建一个ref绑定到select元素
  const selectRef = useRef(null);

  // 组件挂载完成后执行聚焦，空依赖数组确保只执行一次
  useEffect(() => {
    if (selectRef.current) {
      selectRef.current.focus();
    }
  }, []);

  return (
    <select ref={selectRef} id="sel_bookID">
      <option value="binary"> Binary Search </option>
      <option value="linear"> Linear Search </option>
      <option value="interpolation"> Interpolation Search </option>
    </select>
  );
}

export default SearchSelector;

类组件方案（使用createRef + componentDidMount） #

如果你还在使用类组件，可以通过createRef创建引用，在componentDidMount生命周期钩子中完成聚焦：

import React, { Component, createRef } from 'react';

class SearchSelector extends Component {
  constructor(props) {
    super(props);
    this.selectRef = createRef();
  }

  // 组件挂载到DOM后执行
  componentDidMount() {
    if (this.selectRef.current) {
      this.selectRef.current.focus();
    }
  }

  render() {
    return (
      <select ref={this.selectRef} id="sel_bookID">
        <option value="binary"> Binary Search </option>
        <option value="linear"> Linear Search </option>
        <option value="interpolation"> Interpolation Search </option>
      </select>
    );
  }
}

export default SearchSelector;

为什么你之前的方法无效？ #

你尝试的$(document).ready或者DOMContentLoaded事件，是在整个HTML文档加载完成时触发的，但React组件的渲染是异步的——如果你的组件是路由跳转后加载、或者有条件渲染逻辑，那么当这些原生事件触发时，select元素根本还没被渲染到DOM中，自然无法完成聚焦。而React的useEffect（函数组件）和componentDidMount（类组件）都是在组件完全挂载到DOM之后才执行的，这时候能确保select元素已经存在，所以聚焦操作能成功。

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