如何在TypeScript中从封装组件访问react-select的blur方法？

要在你封装的SelectField组件中暴露react-select的blur()方法，最直接的方式是利用React.forwardRef——它能让你将父组件传递的ref转发到内部的Select组件实例上，这样父组件就能直接调用react-select提供的方法了。

步骤1：调整类型定义以支持Ref #

首先需要更新你的TypeScript类型，让SelectField能够接收并传递ref：

import * as React from "react";
import Select, { Props as SelectProps } from "react-select";

export interface SelectValue {
  label: string;
  value: string;
}

export interface SelectFieldProps<TValue> extends SelectProps<TValue> {
  label?: string;
}

// 重构组件类型，支持forwardRef传递
type GenericSelectField<TValue> = React.ForwardRefExoticComponent<
  SelectFieldProps<TValue> & React.RefAttributes<Select<TValue>>
>;

步骤2：用forwardRef重构组件 #

把原来的无状态组件改成React.forwardRef包裹的形式，将接收到的ref直接传递给内部的<Select>组件：

const SelectField: GenericSelectField<SelectValue> = React.forwardRef(
  ({ label = "", ...rest }, ref) => (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      {/* 将父组件的ref绑定到内部Select实例 */}
      <Select classNamePrefix="react-select" ref={ref} {...rest} />
    </div>
  )
);

export default SelectField;

步骤3：在父组件中调用blur方法 #

现在你可以在父组件里通过useRef获取SelectField的实例，直接调用blur()方法：

import { useRef } from "react";
import SelectField, { SelectValue } from "./SelectField";

const ParentComponent = () => {
  // 声明ref，类型指向react-select的Select组件实例
  const selectRef = useRef<Select<SelectValue>>(null);

  const triggerBlur = () => {
    // 安全调用blur方法
    selectRef.current?.blur();
  };

  return (
    <div>
      <SelectField 
        ref={selectRef} 
        label="示例选择器" 
        options={[{label: "选项1", value: "1"}]} 
      />
      <button onClick={triggerBlur}>点击让选择器失焦</button>
    </div>
  );
};

原理说明 #

React.forwardRef的核心作用就是打破组件层级的隔离，把父组件的ref直接传递到子组件内部的目标元素/组件上。在这里，我们把父组件的ref绑定到了react-select的Select实例上，所以父组件的ref.current就等同于Select的实例，自然就能调用它暴露的blur()方法了。

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