带有 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));
            }}
          />
        )}
      />