如果表单上存在验证错误，则防止卸载组件

Question

我在几个不同的网站上看到过这样做，但不确定在React中如何最好地做到这一点。

我有一个表单，它有一些验证，但我想防止用户重定向到另一个路由的表单有验证错误。

FormComponent.js

import React, { useState, useEffect, useRef } from "react";
import Form from "./Form";
import TextInput from "./TextInput";
import * as Yup from "yup";
const FormComponent = () => {
const [initialValues, setInitialValues] = useState();
const formRef = useRef(null);
const onFormSubmit = async (values) => {
console.log({ values });
};
const validationSchema = () => {
const schema = {
test: Yup.string().required("Input is Required")
};
return Yup.object(schema);
};
useEffect(() => {
setInitialValues({
test: ""
});
}, []);
const validateForm = async () => {
if (initialValues && formRef?.current?.validateForm) {
const errors = await formRef.current.validateForm();
if (errors && Object.keys(errors).length !== 0) console.log(errors);
else console.log("continue with redirection");
}
};
return initialValues ? (
<Form
initialValues={initialValues}
onSubmit={onFormSubmit}
formRef={formRef}
validationSchema={validationSchema}
>
<TextInput name="test" />
<button type="submit">Submit</button>
</Form>
) : null;
};
export default FormComponent;

我有一个函数validateForm，当用户试图导航离开路由时需要调用它。(控制台日志指示需要做什么，要么阻止导航到新路由，要么保持当前路由)。

下面是上面示例的CodeSandbox。

不知道该怎么做。

我确实在react-router中遇到了routerWillLeave，仅用于看似基于分类的组件，但是，我正在使用react-router-dom和基于功能的组件。

我也知道react-router-dom和

中的Prompt组件

1. 我不知道如何只触发这个卸载
2. 它有选项继续重定向时，我不能允许，如果有验证错误

如有任何帮助，不胜感激。

Answer 1

你可以有条件地禁用所有链接，但为了防止url更改-你必须有条件地将所有路由指向表单位置…但是，您仍然必须将表单数据存储在localStorage中，以使其在路由更改期间持久化。这同样适用于页面刷新。然后，在有效提交时，您将清除localStorage，启用链接并恢复所有路由。但你真的觉得值得吗?或者sessionStorage可能更合适，而不是强迫用户永远停留在这个表单中…