React/TypeScript函数组件如何让Autosuggest输入自动聚焦？

核心问题分析 #

自动聚焦失败通常源于ref未正确传递到底层输入元素、组件渲染时机不匹配，或是第三方Autosuggest组件需要特定触发方式。结合组件结构，以下是针对性的可行方案：

方案一：通过Ref转发传递聚焦能力 #

如果AutoComplete是自定义封装组件，必须将外部ref转发到底层的<input>元素，才能让父组件触发聚焦：

1. 修改AutoComplete.tsx，暴露聚焦方法 #

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

// 定义组件Props和对外暴露的方法类型
type AutoCompleteProps = {
  placeholder?: string;
  // 保留你原有组件的其他Props定义
};

// 定义父组件可调用的方法
type AutoCompleteExposedMethods = {
  focus: () => void;
};

const AutoComplete = forwardRef<AutoCompleteExposedMethods, AutoCompleteProps>((props, ref) => {
  // 绑定到底层input元素的ref
  const inputRef = useRef<HTMLInputElement>(null);

  // 向父组件暴露focus方法
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
  }), []);

  return (
    <div className="autocomplete-container">
      {/* 将ref绑定到实际的input元素 */}
      <input
        ref={inputRef}
        placeholder={props.placeholder}
        {...props}
      />
      {/* 你的Autosuggest下拉列表逻辑 */}
    </div>
  );
});

export default AutoComplete;

2. 在NumberAutoForm.tsx中调用聚焦 #

import React, { useRef, useEffect } from 'react';
import AutoComplete from './AutoComplete';

const NumberAutoForm = () => {
  // 声明指向AutoComplete组件的ref
  const autoCompleteRef = useRef<AutoCompleteExposedMethods>(null);

  useEffect(() => {
    // 组件挂载完成后触发聚焦
    autoCompleteRef.current?.focus();
  }, []);

  return (
    <form className="number-auto-form">
      <AutoComplete ref={autoCompleteRef} placeholder="输入编号..." />
      {/* 表单其他元素 */}
    </form>
  );
};

export default NumberAutoForm;

方案二：适配异步数据加载场景 #

如果AutoComplete依赖异步接口返回的下拉数据，需等待数据加载完成后再触发聚焦，避免因元素未完全渲染导致失效：

// NumberAutoForm.tsx
const NumberAutoForm = () => {
  const autoCompleteRef = useRef<AutoCompleteExposedMethods>(null);
  const [options, setOptions] = useState<string[]>([]);
  const [isDataLoaded, setIsDataLoaded] = useState(false);

  // 模拟异步加载下拉选项
  useEffect(() => {
    fetch('/api/number-options')
      .then(res => res.json())
      .then(data => {
        setOptions(data);
        setIsDataLoaded(true);
      });
  }, []);

  // 数据加载完成后再执行聚焦
  useEffect(() => {
    if (isDataLoaded) {
      autoCompleteRef.current?.focus();
    }
  }, [isDataLoaded]);

  return (
    <form>
      {isDataLoaded && (
        <AutoComplete
          ref={autoCompleteRef}
          options={options}
          placeholder="输入编号..."
        />
      )}
    </form>
  );
};

方案三：适配第三方Autosuggest库 #

如果你的AutoComplete是基于第三方库（如react-autosuggest），直接使用库提供的内置聚焦API即可：

// AutoComplete.tsx
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import Autosuggest from 'react-autosuggest';

const AutoComplete = forwardRef<{ focus: () => void }, any>((props, ref) => {
  const autosuggestRef = useRef<Autosuggest>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      // 调用第三方库的内置focus方法
      autosuggestRef.current?.focus();
    },
  }), []);

  return (
    <Autosuggest
      ref={autosuggestRef}
      {...props}
      // 库的其他配置项
    />
  );
});

export default AutoComplete;

排查要点 #

1. 确认DOM元素存在：调用focus()前，打印inputRef.current，确保元素已挂载到DOM中，未被display:none或条件渲染隐藏。
2. Strict Mode影响：开发环境下React Strict Mode会导致组件两次渲染，可在生产环境测试，或在useEffect中增加元素存在判断。
3. 避免重复渲染丢失焦点：如果组件因状态频繁更新重渲染，可通过useCallback或useMemo优化，避免ref被重置。

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