如何获取semantic-ui-react中Form.Input包裹的<input>元素的ref？

你碰到的这个情况太常见了——Semantic UI React的表单组件都是经过封装的，直接给Form.Input加ref，拿到的肯定是外层带.field类的容器div，要拿到内部原生的<input>元素，得用组件专门提供的方法，我给你整理两种靠谱的方案：

方法一：用innerRef属性（最推荐） #

Semantic UI React的绝大多数封装组件都提供了innerRef这个属性，它的作用就是帮你把ref直接传递到组件内部的原生DOM元素上，不管你用函数组件还是类组件都能轻松搞定：

函数组件搭配useRef #

import React, { useRef, useEffect } from 'react';
import { Form } from 'semantic-ui-react';

function UserForm() {
  // 创建一个ref对象
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后自动聚焦到输入框
    inputRef.current?.focus();
  }, []);

  return (
    <Form>
      <Form.Input
        label="用户名"
        placeholder="请输入用户名"
        innerRef={inputRef} // 把ref通过innerRef传递给内部input
      />
    </Form>
  );
}

类组件搭配createRef #

import React, { Component } from 'react';
import { Form } from 'semantic-ui-react';

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载后触发聚焦
    this.inputRef.current?.focus();
  }

  render() {
    return (
      <Form>
        <Form.Input
          label="用户名"
          placeholder="请输入用户名"
          innerRef={this.inputRef}
        />
      </Form>
    );
  }
}

方法二：回调式ref（兼容旧版本） #

如果你的Semantic UI React版本比较老，还没支持innerRef，那可以用回调ref的方式来获取原生元素：

function UserForm() {
  let inputElement = null;

  // 回调函数接收原生input元素
  const saveInputRef = (element) => {
    inputElement = element;
  };

  useEffect(() => {
    inputElement?.focus();
  }, []);

  return (
    <Form>
      <Form.Input
        label="用户名"
        placeholder="请输入用户名"
        innerRef={saveInputRef}
      />
    </Form>
  );
}

为啥直接用ref不行？ #

因为Form.Input是个自定义React组件，你直接给它加ref时，React会把这个ref指向自定义组件的实例（函数组件则是转发后的ref对象），而不是内部的原生DOM元素。innerRef就是Semantic UI React专门为这种场景设计的props，帮你把ref透传到了内部的<input>上。

另外你提到在用Redux，确实和这个问题没关系，ref的获取是React组件层面的操作，和状态管理库完全不冲突~

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