带有 React Hook Form 的 Typescript 和 React-select 表单未提交的多个选定值

Question

I am using react hook form and react select with typescript. Its works fine for single selected value. But when I choose isMulti for multiple selected value, I am unable to get the value from the submitted form. Here is the code

 interface ITopic {
  value: string;
  label: string;
}

...........

const topicOptions : ITopic[] = [
    { value: 'javascript', label: 'JAVASCRIPT' },
    { value: 'php', label: 'PHP' },
    { value: 'python', label: 'PYTHON' },
    { value: 'java', label:'JAVA' },
    { value: 'C#', label: 'C#' }
]

type TopicType = { label: string, value: string }

const [selectedTopic, setSelectedTopic] = useState<readonly ITopic[]>([]);

..........

<Controller
   control={control}
   render={({ field: { onChange, value, name, ref } }) =>{
   const handleSelectionChange = (topicOptions: readonly SelectOptionType[]) => {
   setSelectedTopic(topicOptions)
   console.log(selectedTopic)
  }
   return  (
      <Select
      isMulti
      name={name}
      value={selectedTopic}
      options={topicOptions} 
      onChange={handleSelectionChange}
      />
  )}}
  name="topics"
/>   

I am getting empty topics value. Need Help. Thank you.

Answer 1

First, if you are using react-hook-form to manage your form, you shouldn't in addition have useState for your variable.

What you want to do instead is to use onChange from the Controller 's render method.

For instance, my multi select code is (assuming topicOptions is an array of TopicType: { label:string; value:string } )

      <Controller
        control={control}
        name="topics"
        render={({ field: { onChange, value } }) => (
          <Select
            isMulti
            name="topics"
            options={topicOptions}
            value={topicOptions.filter((el) => value?.includes(el.value))}
            onChange={(option: TopicType[] | null) => {
              if (option === null) {
                onChange(null);

                return;
              }

              onChange(option.map((el) => el.value));
            }}
          />
        )}
      />