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

Question

我正在尝试根据文档 (https://react-hook-form.com/get-started#IntegratingControlledInputs)

使用 Controller 包装器组件将 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 表单中：

有什么想法吗？

TIA

Answer 1

请检查此代码沙盒。 https://codesandbox.io/s/react-hook-form-v7-controller-forked-40t3s?file=/src/index.js

  const handleOnChange = (e) => {
    setSelectedValue(e.value);
  };
<label>React Select</label>
          <Controller
            name="ReactSelect"
            control={control}
            render={({ field }) => (
              <ReactSelect
                isClearable
                {...field}
                value={selectedValue}
                onChange={handleOnChange}
                options={[
                  { value: "chocolate", label: "Chocolate" },
                  { value: "strawberry", label: "Strawberry" },
                  { value: "vanilla", label: "Vanilla" }
                ]}
              />
            )}
          />

Answer 2

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

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

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

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

React Hook Form and React Select Not Working as Expected

reactjs

react-select

react-hook-form