如何解决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}`);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。