福米克的自定义"dirty"逻辑

Question

我有一个用React和Formik制作的应用程序。我正在尝试添加一个警告，提醒用户在离开之前保存更改。从react路由器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可能在[某些]步骤的字段初始化期间以某种方式设置。

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

我很满意脏只是被设置在内部onChange为：

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

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

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

Answer 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]);

这不是一个完美的解决方案。口罩的变化不会让它变脏，更糟糕的是会重置它。然而，它比以前好多了。另外，钩子在其中一个台阶里面。其他步骤没有初始化问题，也不需要重置脏。我试图连接到我的cropper组件的onReady方法。然而，结合formikuseField，我不容易让它发挥作用。