Formik 的自定义“脏”逻辑答案

【问题标题】：Custom "dirty" logic for FormikFormik 的自定义“脏”逻辑
【发布时间】：2021-05-10 15:12:53
【问题描述】：

我有一个使用 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 与 state 混合是一个坏主意，因此添加了useField。

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

【问题讨论】：

这个问题你解决了吗？
还没有。状态是一个坏主意，因为它会导致重新渲染。倾向于将 var 与值一起使用，例如 values['prompt'] = true; 与上下文挂钩 - useFormikContext()。

标签： reactjs react-redux formik react-state

【解决方案1】：

我最终做了以下事情：

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

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

【讨论】：