我有一个react钩子表单设置,可以使用yup进行验证,并且可以正常运行。当我单击继续按钮时,它将验证字段并针对它们显示错误消息。但是,我不确定在正确输入所有验证字段后应该如何工作。据我所知,如果所有验证均已完成,则将调用handleSubmit(someFunc)中指定的函数。在我的场景中,它是由RRLink引起的,如下所示...因此,单击Continue按钮,假设一切都有效,然后单击onSubmit()函数,使用toPath的RRLink怎么样...导航到另一页似乎现在丢失了...我该怎么做,以便它在有效时能够拾取RRLink导航到另一页?
const onSubmit = (data) => {
console.log("SUBMIT:" + data);
};
<RRLink onClick={handleSubmit(onSubmit)} to={{ pathname: `/${summaryPath}` }} tabIndex="-1" className="mp-react-router-link">
<Button type="submit" >
Continue
</Button>
</RRLink>
答案 0 :(得分:0)
您可以使用类似的东西:
import { useHistory } from "react-router-dom";
const history = useHistory();
const onSubmit = (data) => {
history.push(`/${summaryPath}`);
};
<form onSubmit={handleSubmit(onSubmit)} tabIndex="-1" className="mp-react-router-link">
{/* form content goes here */}
<Button type="submit" >
Continue
</Button>
</form>
答案 1 :(得分:0)
useHistory useHistory挂钩使您可以访问可用于导航的历史记录实例。
import { useHistory } from "react-router-dom";
let history = useHistory();
const onSubmit = (data) => {
history.push(`/${summaryPath}`);
};