问题描述
我有一个多步表单,每个部分底部都有一个提交按钮,还有一个可点击的部分列表以供导航。我已经实现了一个自动提交功能,如果用户更新信息然后使用菜单导航离开而不点击提交按钮,该功能就会运行:
const AutoSubmit = () => {
const { dirty,submitForm } = useFormikContext();
React.useEffect(() => {
if (dirty) {
submitForm();
}
},[dirty,submitForm]);
return null;
};
问题是,如果 Yup 验证失败,那么提交显然会被阻止,并且上一部分的任何信息都会丢失。基本上,我想要做的是在用户单击实际提交按钮时触发完整验证,但如果是自动提交则进行部分验证(即没有必填字段),以便可以保存他们的进度。
我尝试使用 setFieldValue 在上述组件中设置“autoSubmit: true”标志,然后将 Yup Schema 更改为仅需要字段等,如果它不存在或为 false,但它似乎没有在提交的时间(大概与卸载组件时它的运行有关)。任何人都知道如何让这个工作?
谢谢
解决方法
所以我对此进行了一些重新思考,并认为我应该发布我的解决方案,以防万一有人觉得它有用。我基本上决定绕过对部分提交的 Formik 验证,并让后端处理它。由于这将是一个静默提交,因此不需要验证的用户反馈,并且因为它假设某些数据可能丢失等,这似乎是后端应该决定的事情。
唯一的另一个问题是 Formik 每次表单数据更改时都会重新渲染。我的要求是仅在用户导航离开表单部分时触发此部分提交,因此我上面的示例不合适,因为它会在每次重新渲染时触发。为了解决这个问题,我使用了一个 ref 并将函数放在 Formik 之外:
function FormComponent() {
const formRef = useRef();
useEffect(() => {
return async () => {
const {dirty,isSubmitting,values} = formRef.current;
if (!isSubmitting && dirty) {
try {
await doPartialSubmission(values);
} catch (error) {
// Handle error
}
}
};
},[formRef])
return (
<Formik
innerRef={formRef}
onSubmit={doFullValidatedSubmit()}
>
//Standard formik stuff...
</Formik>
);
};