AntD中无法通过Ref操作Select组件值问题求助

问题原因 #

Ant Design的Select是封装后的React组件，你通过ref获取到的是组件实例，而非底层DOM元素，所以不存在直接的value属性。而Input组件可以通过ref.current.input.value取值，是因为Input的ref允许访问到底层的原生input DOM节点。

解决方案 #

方案1：使用受控组件（推荐） #

这是React和Ant Design推荐的做法，通过state管理选中值，无需依赖ref：

import { useState } from 'react';
import { Select, Button } from 'antd';

const YourComponent = () => {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (value) => {
    setSelectedValue(value);
  };

  const handleRef = () => {
    console.log("show ref::", selectedValue);
  };

  return (
    <>
      <Select
        allowClear
        showSearch
        placeholder="Please select"
        className="onclick_field_width"
        value={selectedValue}
        onChange={handleChange}
      >
        <Select.Option className="option-tab" value="Fulltime">
          Fulltime
        </Select.Option>
        <Select.Option className="option-tab" value="Internal Contractor">
          Internal Contractor
        </Select.Option>
        <Select.Option className="option-tab" value="Third Party Contractor">
          Third Party Contractor
        </Select.Option>
      </Select>

      <button onClick={handleRef}>Clear field</button>
    </>
  );
};

方案2：通过组件实例方法取值（仅特殊场景使用） #

如果一定要用ref获取，AntD的Select组件实例提供了getValue()方法来获取当前选中值：

import { useRef } from 'react';
import { Select, Button } from 'antd';

const YourComponent = () => {
  const ref = useRef(null);

  const handleRef = () => {
    // 调用组件实例的getValue方法获取值
    console.log("show ref::", ref.current?.getValue());
  };

  return (
    <>
      <Select
        allowClear
        showSearch
        placeholder="Please select"
        className="onclick_field_width"
        ref={ref}
      >
        <Select.Option className="option-tab" value="Fulltime">
          Fulltime
        </Select.Option>
        <Select.Option className="option-tab" value="Internal Contractor">
          Internal Contractor
        </Select.Option>
        <Select.Option className="option-tab" value="Third Party Contractor">
          Third Party Contractor
        </Select.Option>
      </Select>

      <button onClick={handleRef}>Clear field</button>
    </>
  );
};

补充说明 #

优先使用受控组件方案，它更符合React的状态管理逻辑，代码更易维护、可预测。直接操作组件实例的方式属于非受控用法，仅在特殊场景下考虑使用。

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