如何为React-Select的onChange事件选中项添加自定义类型

问题 #

使用react-select封装SelectBox组件时，onChange事件的选中项类型为unknown，无法直接提取value和label属性。尝试将参数类型改为自定义的SelectedItemType时，出现类型不兼容报错：

Type '(newValue: SelectedItemType) => void' is not assignable to type '(newValue: unknown, actionMeta: ActionMeta) => void'. Types of parameters 'newValue' and 'newValue' are incompatible. Type 'unknown' is not assignable to type 'SelectedItemType'.

原代码如下：

import { ForwardedRef, forwardRef } from "react";
import Select, { SelectInstance } from "react-select";

export type SelectedItemType = {
value: string;
label: string;
};

export type SelectProps = {
options: SelectedItemType[];
ref?: ForwardedRef<SelectInstance>;
onChange: (selectedItem: unknown) => void;
};

const SelectBox: React.FC<SelectProps> = forwardRef<
SelectInstance,
SelectProps
>(({ options, onChange, ...props }, ref) => {
return (
<Select
options={options}
ref={ref}
{...props}
onChange={(newValue: unknown) => onChange(newValue)}
/>
);
});

export default SelectBox;

解决方案 #

核心是利用react-select的泛型支持，为组件指定自定义选项类型，让所有回调类型自动匹配：

1. 补充导入必要类型 #

导入ActionMeta，同时为SelectInstance指定泛型约束：

import Select, { SelectInstance, ActionMeta } from "react-select";

2. 修正SelectProps类型定义 #

将onChange的参数类型改为SelectedItemType | null（取消选中时会返回null），同时支持传递ActionMeta参数：

export type SelectProps = {
  options: SelectedItemType[];
  ref?: ForwardedRef<SelectInstance<SelectedItemType>>;
  onChange: (selectedItem: SelectedItemType | null, actionMeta?: ActionMeta<SelectedItemType>) => void;
};

3. 为Select组件指定泛型 #

在使用Select时传入SelectedItemType作为泛型参数，自动推导回调的正确类型：

<Select<SelectedItemType>
  options={options}
  ref={ref}
  {...props}
  onChange={(newValue, actionMeta) => onChange(newValue, actionMeta)}
/>

修改后的完整代码 #

import { ForwardedRef, forwardRef } from "react";
import Select, { SelectInstance, ActionMeta } from "react-select";

export type SelectedItemType = {
  value: string;
  label: string;
};

export type SelectProps = {
  options: SelectedItemType[];
  ref?: ForwardedRef<SelectInstance<SelectedItemType>>;
  onChange: (selectedItem: SelectedItemType | null, actionMeta?: ActionMeta<SelectedItemType>) => void;
};

const SelectBox = forwardRef<SelectInstance<SelectedItemType>, SelectProps>(
  ({ options, onChange, ...props }, ref) => {
    return (
      <Select<SelectedItemType>
        options={options}
        ref={ref}
        {...props}
        onChange={(newValue, actionMeta) => onChange(newValue, actionMeta)}
      />
    );
  }
);

export default SelectBox;

额外说明 #

• 如果组件支持多选，需将SelectedItemType | null改为SelectedItemType[] | null，同时对应调整泛型和参数类型。
• 修改后使用SelectBox时，onChange的选中项会自动拥有value和label的类型提示，无需手动类型断言。

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