如何在semantic-ui-react中实现输入框自动聚焦？

我之前也踩过Semantic UI React输入框自动聚焦的坑，给你几个亲测有效的解决方案：

• 直接使用原生autoFocus属性
  Semantic UI React的Input组件支持透传原生HTML属性，虽然官方文档没特意强调，但直接加autoFocus就能实现自动聚焦：

  import { Input } from 'semantic-ui-react';
  
  function AutoFocusInput() {
    return <Input autoFocus placeholder="打开页面我就自动聚焦啦" />;
  }
  

• 通过Ref手动触发聚焦
  如果需要在特定时机（比如弹窗打开后、数据加载完成后）才聚焦，用React的Ref来操作DOM更灵活：

  import { useRef, useEffect } from 'react';
  import { Input } from 'semantic-ui-react';
  
  function ControlledFocusInput() {
    const inputRef = useRef(null);
  
    useEffect(() => {
      // 组件挂载完成后触发聚焦
      inputRef.current?.focus();
    }, []);
  
    return <Input ref={inputRef} placeholder="手动触发我聚焦" />;
  }
  

• 别再被focus属性误导啦
  你提到的focus属性其实只是用来控制输入框的聚焦样式，比如边框颜色变化，它并不会真正将光标定位到输入框内，这就是为什么你用了没效果的原因哦~

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