如何为Antd Select下拉框内的Input组件设置自动聚焦？

问题原因 #

你之前的写法失效核心有两个原因：

1. Antd 3.x 的 Select 下拉菜单属于懒渲染节点，只有触发展开后才会挂载对应DOM，你监听inputRef作为依赖完全不会触发useEffect执行——因为useRef返回的对象引用是永久不变的，依赖项感知不到变化。
2. 即使你监听了展开状态，状态更新后立刻读取inputRef也拿不到真实DOM：状态更新触发DOM渲染是异步的，此时下拉里的Input还没完成挂载，inputRef.current为null，focus()调用自然无效。

解决方案 #

修改你的useEffect逻辑，依赖项改为控制Select展开的状态isOpenSelectCategory，同时加异步延迟等待DOM挂载完成，还要兼容Antd 3 Input的ref特性：Antd 3封装的Input组件ref指向组件实例，真实的原生输入框DOM挂在input属性下。
修改后的代码如下：

useEffect(() => {
  // 仅当下拉展开时执行聚焦逻辑
  if (isOpenSelectCategory) {
    // setTimeout 0 会等待当前批次DOM渲染完成后执行，确保Input已经挂载
    setTimeout(() => {
      if (!inputRef.current) return;
      // 兼容原生DOM和Antd Input组件实例两种情况
      const targetInput = inputRef.current.input || inputRef.current;
      targetInput.focus();
    }, 0)
  }
}, [isOpenSelectCategory])

兜底兼容 #

如果上面的写法还有偶现不生效的情况，可以把延时调整为16ms（对应一帧的时间），或者改用requestAnimationFrame代替setTimeout，适配不同设备的渲染速度：

useEffect(() => {
  if (isOpenSelectCategory) {
    requestAnimationFrame(() => {
      if (!inputRef.current) return;
      const targetInput = inputRef.current.input || inputRef.current;
      targetInput.focus();
    })
  }
}, [isOpenSelectCategory])

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