自定义反应选择可创建选择组件和reach-hook-form打字稿错误

Question

我有一个使用反应选择的自定义组件。这使用了

Createable Select

，看起来像：

import CreatableSelect from "react-select/creatable";
import {
  ActionMeta,
  MultiValue,
  MultiValueGenericProps,
  OptionProps,
  StylesConfig,
  components,
} from "react-select";


type UserOption = {
  value: number;
  label: string;
  logo?: string;
};


type CustomUserInputProps = {
  userOptions: UserOption[];
  onChange: (
    newValue: MultiValue<UserOption>,
    actionMeta: ActionMeta<UserOption>
  ) => void;
  onBlur: ChangeEventHandler;
  value: UserOption[];
  name: string;
}


export function CustomUserInput ({
  userOptions,
  onChange,
  onBlur,
  value,
  name,
  disabled,
  isEdited,
}: CustomUserInputProps ) {
   ...
   return (
         <CreatableSelect
          options={userOptions}
          onChange={onChange}
          placeholder={""}
          isMulti={true}
          onBlur={onBlur}
          value={value}
          name={name}
          components={{
            Option: CustomOption,
            MultiValueLabel: CustomSelectValue,
          }}
          styles={style}
      />
);};

现在，当我尝试将其与反应钩子表单一起使用时，特别是在编辑表单时，我有类似的内容：

interface SelectedUser extends UserOption { isFreeText?:boolean };

type MyFormProps = { initialUsers: SelectedUser[] };

const ThisIsMyForm( {initialUsers}: MyFormProps ) => {
 const defaultValues = {
    users: initialUsers,
  };

  ...
  return ( 
    <Controller
      control={control}
      name="users"
      render={({ field: { onChange, onBlur, value, name } }) => (
      <CustomUserInput 
         userOptions={userOptions}
         onChange={onChange}
         onBlur={onBlur}
         value={value}
         name={name}
       />
     )}
 />
};

有了这个，我在

onChange

上出现打字稿错误，其中写着：

(event: ChangeEvent<Element> | { value: number; label: string; logo: string; isFreeText: boolean | undefined; }[]) => void' 
is not assignable to type 
'(newValue: MultiValue<UserOption>, actionMeta: ActionMeta<UserOption>) => void

我不确定如何满足

onChange

上的react-hook-form类型，并为

onChange

反应选择

CreateableSelect

Answer 1

当您传递

onChange

属性时，您需要将其包装在另一个类型为“(newValue: MultiValue, actionMeta: ActionMeta) => void”的函数中。在该函数内，您将数据转换为

react-hook-form

格式，然后用它调用

onChange

函数。

像这样：

<Controller
  control={control}
  name="users"
  render={({ field: { onChange, onBlur, value, name } }) => (
  <CustomUserInput 
      userOptions={userOptions}
      onChange={(multiValue: MultiValue, actionMeta:ActionMeta)=>{
        // convert the data and call onChange
      }}
      onBlur={onBlur}
      value={value}
      name={name}
    />
  )}
/>