如何使用<Link>和<Button>在 React 中

Question

我目前使用React。我的代码在react中使用useForm来执行验证。

当用户输入昵称并按下Enter键或单击Button时，我要转到another page。

现在我的代码是把<button> tag里面的<Link> tag，它不会完成验证，将立即转到另一个页面。

在相反的情况下，我的代码不会转到另一个页面。帮帮我:

<form onSubmit={handleSubmit(onValid)}>
<input
{...register("nickName", {
required: true,
minLength: {
value: 2,
message: "error",
},
})}
className="join-input"
placeholder="nickname here"
/>
<div className="error-message">{errors?.nickName?.message}</div>
<Link to={"/office"}>
<button className="go-btn bttn-material-flat">Enter</button>
</Link> 
</form>

Answer 1

您应该处理链接到您的handleSubmit功能的新页面，例如handleSubmit(onSubmit)，然后:

const onSubmit = () => {
// programatically link here, implementation differs depending on what framework you are using. 
};

<form onSubmit={handleSubmit(onSubmit)}>
...
</form>