react js中的登录问题和onSubmit问题

Question

我登录时遇到问题（我需要检查电子邮件并通过），它只能检查电子邮件 我的第二个问题是表单中的 onSubmit 不起作用！

`从 'react' 导入 React, {useEffect, useState}; 从'../../assets/images/login.svg'导入loginImg； 从“react-router-dom”导入{Link}；

const 登录 = () => {

const [email,setEmail] = useState("");
const [password,setPassword] = useState("");
const [isLogin,setIsLogin]=useState(1);

const TOKEN_KEY = 'jwt';

const handleLogin=()=>{
    if (email === "[email protected]" && password === "1212"){
        setIsLogin(1);
    } else {

        setIsLogin(0)
    }
}
useEffect(()=>{
    if (isLogin === 1){
        localStorage.setItem(TOKEN_KEY, 'TestLogin');
    } else {
        localStorage.removeItem(TOKEN_KEY);
    }
})

return (
    <div className="container-fluid">
        <form onSubmit={handleLogin} className="row">
            <div className="col-md-6 col-sm-12 text-center align-self-center">
                <div>
                    <p className="h1">ورود</p>
                    <div className="col-sm-12 col-md-4 py-4 mx-auto">
                        <input className="form-control" required autoFocus type="email" onChange={e => setEmail(e.target.value)} placeholder=" ایمیل خود را وارد کنید"/>
                    </div>
                    <div className="col-sm-12 col-md-4 pb-4 mx-auto">
                    <input className="form-control" required type="password" onChange={e => setPassword(e.target.value)} placeholder=" رمز عبور خود را وارد کنید"/>
                    </div>
                    <Link to="/dashboard" className="btn btn-primary" > ورود</Link>
                </div>
            </div>
            <div className="col-md-6 col-sm-12">
                <img src={loginImg}/>
            </div>
        </form>
    </div>
);

};`

Answer 1

我希望你做得很好，在你的代码中，登录组件没有触发handleLogin方法，因为你没有编写按钮类型的提交。这就是为什么不调用登录组件中的handleLogin方法的原因。所以你可以替换为按钮类型提交。

语法：

<input type="submit" value="Login">

希望您看完本文后能明白。

Answer 2

我认为没有提交按钮，你需要添加一个。另外，如果您在表单标签中使用 onSubmit，则应该同时使用 Prevent.Default() 和 Button。您应该修改 useEffect，因为它会导致无限渲染。

const handleLogin=(e)=>{
    e.preventDefault();
    if (email === "[email protected]" && password === "1212"){
        setIsLogin(1);
    } else {

        setIsLogin(0)
    }
}

useEffect(()=> {
    if (isLogin === 1){
        localStorage.setItem(TOKEN_KEY, 'TestLogin');
    } else {
        localStorage.removeItem(TOKEN_KEY);
    }
},[isLogin])

<button type="submit" className="btn btn-primary">ورود</button>