React Hook Form OnSubmit处理程序和验证

问题描述

我有一个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>

解决方法

您可以使用类似的东西：

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>

,

useHistory useHistory挂钩使您可以访问可用于导航的历史记录实例。

import { useHistory } from "react-router-dom";

let history = useHistory();

const onSubmit = (data) => {
   history.push(`/${summaryPath}`);
};