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

Question

我有一个带有react-select:

的react-hook表单

• 当我改变react-select的值时，表单变得既脏又有效
• 提交按钮已经启用，表单可以发送了。
• 一旦表单被发送，useFormdefaultValue被重置为新值
• 提交按钮再次被禁用，等待表单中的更改。当我再次更改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]);