当 React-Select 改变时，React-hook-form 不会改变表单有效性

Question

我有一个 react-hook-form 和 react-select:

当我更改 react-select 的值时，表单变得既脏又有效。
提交按钮现已启用，可以发送表单。
表单发送后，useForm 默认值将重置为新值
提交按钮再次被禁用，等待表单中的更改。
当我再次更改 react-select 值时，表单不脏。该按钮保持禁用状态。然而，react-select 值已更改。

我几乎什么都试过了：用setValue("name", value, {shouldDirty: true}替换onChange，等等

代码如下：

import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

const options = [
  { value: "joe", label: "Joe" },
  { value: "jack", label: "Jack" },
  { value: "averell", label: "Averell" }
];

type Data = { name: string; surname: string };
export default function Form({
  defaultValues,
  onSend
}: {
  defaultValues: Data;
  onSend: (data: Data) => void;
}) {
  const {
    register,
    handleSubmit,
    reset,
    getValues,
    control,
    formState: { isValid, isDirty }
  } = useForm({
    mode: "onChange",
    defaultValues
  });

  const onSubmit = (data: Data) => {
    onSend(data);
    reset(getValues());
    console.log("data sent!", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
     
        <Controller
          control={control}
          name="name"
          render={({ field }) => (
            <Select
            {...field}
              value={field.value}
              options={options}
              onChange={(v) => field.onChange(v)}
            />
          )}
        />
      <input placeholder="surname" {...register("surname")}/>
    
     
        <button type="submit" disabled={!isValid || !isDirty}>
          submit
        </button>

    </form>
  );
}

如何解决这个问题？

ps：这里也是一个沙箱：https://codesandbox.io/s/react-hook-form-test-8tdq3?file=/src/FormController.tsx

Answer 1

所以答案是我需要添加一个useEffect来在提交后重置表单值：

useEffect(() => {
    if (formState.isSubmitSuccessful) {
      reset(getValues());
    }
  }, [formState, getValues, reset]);

当 React-Select 改变时，React-hook-form 不会改变表单有效性

React-hook-form doesn't change the form validity when React-Select is changed

reactjs

react-select

react-hook-form