reactjs - کامپوننت select قابل ایجاد سفارشی react-select و خطای تایپاسکریپت در reach-hook-form

من یک کامپوننت سفارشی دارم که از react-select استفاده میکند. این از 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}
      />
);};

حال وقتی که سعی میکنم از این با React Hook Form استفاده کنم، بهخصوص هنگام ویرایش یک فرم، چیزی شبیه به این دارم:

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

من مطمئن نیستم چگونه نوع react-hook-form را روی onChange و react-selects onChange برای یک CreateableSelect برآورده کنم

پاسخ شماره ۱

وقتی که prop 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}
    />
  )}
/>