React Hook Form 和 React Select 未按预期工作

Question

我试图Controller按照文档（https://react-hook-form.com/get-started#IntegratingControlledInputs）使用包装器组件将 React Select 包装在 React Hook Form 内

            <Controller
              name="ShiftCaptain"
              control={control}
              render={({ field }) => (
                <Select
                  {...field}
                  value={selectValue}
                  options={options}
                  placeholder={"Select Person"}
                  onChange={(e) => setSelectValue(e)}
                />
              )}
            />

提交表单时，React Select 中捕获的值不会填充到 React Hook Forms 中：

有任何想法吗？

TIA

Answer 1

您在组件上传播的回调field对象有一个和一个属性，RHF 需要链接该值并将该值更改为其内部表单状态。现在您将覆盖此值，因此 RHF 无法更新该值。试试这个，它应该可以工作：render<ReactSelect />valueonChange

<Controller
  name="ShiftCaptain"
  control={control}
  defaultValue={null}
  render={({ field }) => (
    <Select
      {...field}
      options={options}
      placeholder={"Select Person"}
      
    />
  )}
/>

如果您想在页面加载后为您的选择设置默认值，您应该使用 prop <Controller /> defaultValue，它将将该值传递给您的<ReactSelect />.