我使用react-hook-form庫來驗證我的表單，但我希望我的頁面在提交表單后不要重新加載，以便我可以自己將用戶重定向到所需的頁面。例如，使用react-router-dom庫中的navigate鉤子。如何停止頁面重新加載？
我的代碼：
import React from 'react';
import {signInWithEmailAndPassword, updateCurrentUser} from "firebase/auth";
import {auth} from "../firebase";
import {Link, useLocation, useNavigate} from "react-router-dom";
import styles from "./elements.module.css";
import {SubmitHandler, useForm} from "react-hook-form";
import {IAuthFormFields} from "../types";
import cn from "classnames";
type locationState = { from: string };
const SignIn = () => {
const navigate = useNavigate()
const location = useLocation();
const fromPage = (location.state as locationState)?.from ?? '/';
const {
register,
formState: { errors },
handleSubmit,
setError
} = useForm<IAuthFormFields>({
mode: 'onBlur'
});
const handleLogin: SubmitHandler<IAuthFormFields> = ({email, pass}) => {
signInWithEmailAndPassword(auth, email, pass)
.then(async (userCredential) => {
const {user} = userCredential;
await updateCurrentUser(auth, user);
navigate(fromPage);
});
}
return (
<form onSubmit={handleSubmit(handleLogin)}>
<fieldset className={"flex flex-col items-center"}>
<h1 className={"text-2xl font-medium"}>Sign In</h1>
<div className={"flex flex-col w-full my-3"}>
<input
type="email"
{...register('email', {
required: true,
pattern: {
value: /^[\w-.] @([\w-] \.) [\w-]{2,4}$/,
message: 'Invalid email'
}
})}
placeholder="Email"
className={cn(styles.input, "my-3")}
/>
{errors?.email && <span className={styles.msg_error} >{errors.email.message}</span>}
<input
type="password"
{...register('pass', {
required: true,
})}
placeholder="Password"
className={cn(styles.input, "my-3")}
/>
{errors?.pass && <span className={styles.msg_error} >{errors.pass.message}</span>}
<button className={cn(styles.btn, "my-3")} >
Sign In
</button>
</div>
</fieldset>
</form>
);
};
export default SignIn;
uj5u.com熱心網友回復：
根據檔案（https://react-hook-form.com/api/useform/handlesubmit/） - 該方法需要一個 SubmitHandler 回呼引數（名為“成功的回呼。）
((data: Object, e?: Event) => void, (errors: Object, e?: Event) => void) => Function
你有這個處理程式，只需將事件作為第二個引數，這個：
const handleLogin: SubmitHandler<IAuthFormFields> = ({email, pass}) => {....
會變成這樣：
const handleLogin: SubmitHandler<IAuthFormFields> = ({email, pass}, e?: Event) => {
e.preventDefault()
signInWithEmailAndPassword(auth, email, pass)
.then(async (userCredential) => {....
uj5u.com熱心網友回復：
將 e 作為引數傳遞給 onSubmit 函式并在該函式內部寫入
e.preventDefault();
uj5u.com熱心網友回復：
并嘗試在您的 handleSubmit 函式的開頭使用：
e.preventDefault()
uj5u.com熱心網友回復：
添加 event.preventDefault(); 在handleLogin函式上:)哦，你還需要一個事件引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475026.html