Formik 的自定义“脏”逻辑

如何解决Formik 的自定义“脏”逻辑

我有一个用 React 和 Formik 制作的应用。我正在尝试为用户添加警告以在导航离开之前保存更改。从 react-router-dom 5 开始，我们可以使用 Prompt。因此，我最初的代码是：

const PromptWhenDirty = () => {
  const { dirty,touched } = useFormikContext();
  console.log('touched:',touched);
  return <Prompt when={dirty} message={'Leave without saving changes?'} />;
};

我在基于 formik 的“步骤向导”中添加了一行，所以现在看起来像：

  <Form>
    <PromptWhenDirty />
    <Step
      current={currentStep}
      values={values}
      onChange={onChange}
      handleSubmit={handleSubmit}
      errors={errors}
      isSubmitting={isSubmitting}
    />
  </Form>

“提示”对话框确实出现了，并且工作正常。但是，对于某些步骤，我的 dirty 标志始终设置为 true。我不确定为什么。我确实使用了 useField 和许多其他功能。我假设 dirty 可能在 [某些] 步骤的字段初始化期间以某种方式设置。

此外，直到我按一次提交 [-这是一个步骤向导，其中每一步都重新提交数据]，触摸始终是 {}。编辑字段数据不会设置它。我第一次提交表单后，表单中的每个字段都在 touched 中并设置为 true。

我可以将脏设置在 onChange 中作为：

const onChange = (props) => {
  console.log('set dirty here');
  ...
}

我知道我可以使用状态挂钩，并将其设置在 onChange 中。但是，我的印象是将 Formik 与状态混合是一个坏主意，因此添加了 useField。

我可以覆盖 dirty 的计算方式吗？

解决方法

我最终做了以下事情：

useEffect(() => {
  // initialization is compete,reset `dirty`
  if (mask.value) {
    resetForm({
      values: {
        ...values,mask: mask.value,croppedImage: croppedImage.value
      }
    });
  }
  // eslint-disable-next-line
},[mask.value]);

这不是一个完美的解决方案。对面罩的更改不会弄脏，更糟的是将其重置。然而，它明显比以前好。另外，挂钩位于其中一个台阶内。其他步骤没有初始化问题，不需要重置dirty。我试图连接到我的裁剪组件的 onReady 方法。但是，与 formik useField 一起使用时，我无法轻松使其工作。