自定义react-select Creatable Select组件与react-hook-form的TypeScript类型错误

问题根源 #

react-select的onChange回调接收两个参数：newValue: MultiValue<UserOption>和actionMeta: ActionMeta<UserOption>，但react-hook-form的Controller提供的onChange仅接收单一值参数（事件或表单字段值），同时表单使用了扩展自UserOption的SelectedUser类型，多重原因导致类型不匹配。

解决方案 #

通过包装回调函数适配参数差异，并处理类型转换，具体实现如下：

1. 在Controller中适配onChange回调 #

在Controller的render方法里，封装符合react-select要求的onChange函数，忽略不需要的actionMeta参数，并将UserOption[]类型转换为表单所需的SelectedUser[]类型：

<Controller
  control={control}
  name="users"
  render={({ field: { onChange, onBlur, value, name } }) => {
    const handleSelectChange = (
      newValue: MultiValue<UserOption>,
      _actionMeta: ActionMeta<UserOption>
    ) => {
      // 将UserOption转换为SelectedUser，给创建的新选项补全isFreeText默认值
      const convertedUsers = newValue.map(opt => ({
        ...opt,
        isFreeText: opt.isFreeText ?? false
      })) as SelectedUser[];
      onChange(convertedUsers);
    };

    return (
      <CustomUserInput 
        userOptions={userOptions}
        onChange={handleSelectChange}
        onBlur={onBlur}
        value={value as UserOption[]} // SelectedUser是UserOption子类，类型转换安全
        name={name}
      />
    );
  }}
/>

2. 可选：简化CustomUserInput的类型定义 #

如果业务中不需要使用actionMeta参数，可以修改CustomUserInputProps的onChange类型，将第二个参数设为可选，减少后续适配成本：

type CustomUserInputProps = {
  userOptions: UserOption[];
  onChange: (
    newValue: MultiValue<UserOption>,
    actionMeta?: ActionMeta<UserOption> // 设为可选参数
  ) => void;
  onBlur: ChangeEventHandler;
  value: UserOption[];
  name: string;
  // 补充组件用到的其他属性
  disabled?: boolean;
  isEdited?: boolean;
};

3. 确保默认值类型一致性 #

检查defaultValues的类型定义，保证initialUsers的SelectedUser[]类型与表单字段users的预期类型完全匹配：

const defaultValues: { users: SelectedUser[] } = {
  users: initialUsers,
};

关键说明 #

• react-hook-form的onChange仅关注最终的表单字段值，因此可以直接忽略react-select返回的actionMeta参数。
• SelectedUser是UserOption的扩展类型，将SelectedUser[]转换为UserOption[]类型安全；反向转换时需补全isFreeText属性的默认值，避免类型校验报错。

内容的提问来源于stack exchange，提问作者Fer-de-lance