如何实现Semantic UI React下拉框内部input的自动聚焦

失效原因 #

直接绑定外层ref无法生效的核心原因有两个：

• Semantic UI React 的 Dropdown 组件外层ref指向的是组件根容器，不是内部的搜索输入框
• 下拉菜单的展开是异步渲染流程，未等内部input挂载完成就调用focus方法自然不会生效

正确实现方式 #

步骤1：绑定内部输入框ref #

直接使用Dropdown组件原生提供的inputRef属性，这个属性会直接绑定到内部搜索input的DOM节点上，不需要手动查询DOM。

步骤2：在下拉打开回调中触发聚焦 #

使用Dropdown的onOpen回调，这个回调会在下拉菜单完全渲染完成后触发，此时调用focus不会出现节点不存在的问题。

示例代码 #

import React, { useRef } from 'react'
import { Dropdown } from 'semantic-ui-react'

const DropdownExample = () => {
  const searchInputRef = useRef(null)
  
  const handleDropdownOpen = () => {
    // 加可选链避免特殊情况节点未挂载报错
    searchInputRef.current?.focus()
  }

  return (
    <Dropdown
      placeholder='搜索选项'
      fluid
      search
      selection
      options={[
        { key: '1', value: '1', text: '选项1' },
        { key: '2', value: '2', text: '选项2' },
        { key: '3', value: '3', text: '选项3' },
      ]}
      onOpen={handleDropdownOpen}
      inputRef={searchInputRef}
    />
  )
}

export default DropdownExample

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