React Hook Form - 在不清除表单的情况下重置“isDirty”？

Question

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

有点假设isDirty一旦提交表单就会被清除，但它仍然很脏。我可以reset从调用onSubmit，但这将清除表单的内容 - 我不想要。

想法？

Answer 1

在 useEffect() 中重置会起作用，但 useEffect() 不应该用于此类事情。查看有关 React 18 和 useEffect() 运行两次的所有讨论。

只要打电话

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

在你的handleSubmit函数最后。如果您只想保留当前值，则无需提供所有值。

Answer 2

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

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。

在发送信息后不重新加载或重定向的表单中，这是一个相当普遍的需求，因此我认为他们最终会创建一种更清晰的方式来做到这一点。

Answer 3

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

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