React Hook Form - 如何重置 "isDirty" 而不清除表单？

Question

基本上就是标题所说的。当我提交表单时，我会检查登录是否成功，如果不成功，就会显示一条消息。但是当用户开始输入时，我希望这个消息消失。

我认为 isDirty 在表单提交后会被清除，但它仍然是脏的。我可以从 onSubmit 中调用 reset，但这会清除表单的内容 - 这不是我想要的。

有什么好的想法吗？

- Ills

---

请包含相关代码。 - backtick

Answer 1

您可以向重置发送一个新的值集。由于您在提交处理程序中接收到一组值，因此可以通过以下方式连接两个功能：

const {reset, handleSubmit, formState} = useForm();
const {isDirty} = formState;

const handleFormSubmit = (values) =>
{
    //This would be the call where you post your info
    fetch('google.com')
    .then(response => console.log('response', response))
    .finally(() => reset(values));
}

注意上面示例中的reset(values)，它将重置表单以使用尝试提交的值。因此，将isDirty重新设为false。

这在提交信息后不重新加载或重定向的表单中是一种相当常见的需求，因此我认为他们最终会创建更清晰的方法来完成此操作。

- Ale

---

警告：reset 还会更改 useFieldArray 字段的 id，因此会导致这些组件重新挂载（只有某些用例会受到影响）。更多讨论请参见此处。下面的答案(reset({}, { keepValues: true });)似乎没有这个问题。 - Garrett

Answer 2

在useEffect()中重置将起作用，但是不应该使用useEffect()来处理此类事情。请参阅有关React 18和useEffect()运行两次的所有讨论。

只需在handleSubmit函数末尾调用

reset({}, { keepValues: true });

即可。如果您只想保留当前值，则无需提供所有值。

- ozu

---

这会导致另一个问题，并将表单设置为先前的默认值。还尝试添加 keepValues 但没有效果。 - TruMan1

Answer 3

感谢Charlie-Hua发布的帖子，我们通过以下方法解决了这个问题： https://github.com/react-hook-form/react-hook-form/issues/3097

  React.useEffect(() => {
    if (isSubmitSuccessful) {
      reset({}, { keepValues: true });
    }
  }, [isSubmitSuccessful, reset]);

- Davemundo

Answer 4

要重置isDirty状态，而不干扰表单的值或默认值，一个例子可以是（明确说明）：

reset(undefined, {keepValues: true, keepDirty: false, keepDefaultValues: false});

使用React.useEffect()钩子的示例:

我想保留提交的name和filter值，并且能够重置为原始的defaultValues，同时重置isDirty:

const { reset, formState: { isSubmitSuccessful } } = useForm({
  defaultValues: {
    filter: "",
    category: "",
  }
});

React.useEffect(() => {
  if(isSubmitSuccessful) {
    reset(undefined, {keepValues: true, keepDirty: false, keepDefaultValues: false});
  }
}, [isSubmitSuccessful, reset]);

useForm文档在props下解释了reset()的不同选项。它们也可以在项目的TypeScript声明中引用。

推断类型：

const reset: (values?: any, keepStateOptions?: Partial<{
    keepDirtyValues: boolean;
    keepErrors: boolean;
    keepDirty: boolean;
    keepValues: boolean;
    keepDefaultValues: boolean;
    keepIsSubmitted: boolean;
    keepTouched: boolean;
    keepIsValid: boolean;
    keepSubmitCount: boolean;
}> | undefined) => void

- andyjb