React.js登录校验仅验证邮箱、表单onSubmit事件不生效问题求助

修复说明 #

1. onSubmit事件无法触发问题

原因是你使用<Link>组件作为登录按钮，该组件的默认行为是直接跳转路由，不会触发表单的提交事件。
修复操作：

• 替换<Link>为type="submit"的原生按钮
• 在handleLogin回调中接收事件对象，调用e.preventDefault()阻止表单默认刷新页面的行为
• 引入useNavigate钩子，校验通过后编程式跳转至仪表盘页

2. 校验逻辑异常问题

原因有三点：

• isLogin初始值设置为1，页面首次加载就会被判定为登录成功，直接写入token
• useEffect未设置依赖数组，组件每次渲染都会重复执行存储逻辑
• 没有添加输入非空前置校验
  修复操作：
• 将isLogin初始值改为undefined代表未校验状态
• 给useEffect添加[isLogin]依赖，仅在登录状态变更时执行
• 校验逻辑中先判断邮箱、密码均不为空，再执行值比对

修复后完整代码 #

import React, {useEffect, useState} from 'react';
import loginImg from '../../assets/images/login.svg';
import {useNavigate} from "react-router-dom";

const Login = () => {
  const [email,setEmail] = useState("");
  const [password,setPassword] = useState("");
  // 初始值设为undefined 代表未进行登录校验
  const [isLogin,setIsLogin]=useState(undefined);
  const navigate = useNavigate();

  const TOKEN_KEY = 'jwt';

  const handleLogin=(e)=>{
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    // 先做非空判断
    if (!email.trim() || !password.trim()) {
      setIsLogin(0);
      return;
    }
    // 再比对预设账号密码
    if (email === "bardia@test.com" && password === "1212"){
      setIsLogin(1);
      // 校验通过跳转到仪表盘
      navigate("/dashboard");
    } else {
      setIsLogin(0)
    }
  }

  // 添加依赖数组 仅isLogin变化时执行
  useEffect(()=>{
    // 未校验状态不执行存储逻辑
    if (isLogin === undefined) return;
    if (isLogin === 1){
      localStorage.setItem(TOKEN_KEY, 'TestLogin');
    } else {
      localStorage.removeItem(TOKEN_KEY);
      alert("邮箱或密码错误");
    }
  }, [isLogin])

  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=" ایمیل خود را وارد کنید"
                value={email}
              />
            </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=" رمز عبور خود را وارد کنید"
                value={password}
              />
            </div>
            {/* 替换Link为submit类型按钮 */}
            <button type="submit" className="btn btn-primary">ورود</button>
          </div>
        </div>
        <div className="col-md-6 col-sm-12">
          <img src={loginImg} alt="登录页示意图"/>
        </div>
      </form>
    </div>
  );
};

export default Login;

内容的提问来源于stack exchange，提问作者bardia riahi