帶有 React Hook Form 的 Typescript 和 React-select 表單未提交的多個選定值

Question

我正在使用反應掛鈎形式並使用打字稿反應選擇。 它適用於單個選定值。 但是當我為多個選定值選擇 isMulti 時，我無法從提交的表單中獲取值。 這是代碼

 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"
/>   

我得到空主題值。 需要幫忙。 謝謝你。

Answer 1

首先，如果你使用react-hook-form來管理你的表單，你不應該另外為你的變量使用useState 。

您要做的是使用Controller的render方法中的onChange 。

例如，我的多選代碼是（假設topicOptions是 TopicType 的數組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));
            }}
          />
        )}
      />