React登录表单点击submit按钮页面刷新，submitHandler未触发如何解决

onSubmit是表单元素<form>的专属事件，你当前把事件绑定到了提交按钮<button>上，导致submitHandler函数完全没有被触发，浏览器执行了原生表单提交的默认行为（向当前地址发GET请求、重载页面）。

把onSubmit事件从按钮上移除，绑定到<form>标签上即可，修改后的代码如下：

import React from 'react'
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "../../../actions/userActions";
import { Form, Button, Row, Col } from "react-bootstrap";

function LoginForm ({history}) {

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

    const submitHandler = (e) => {
      e.preventDefault();
      console.log(email, password)
      // dispatch(login(email, password));
    };

   
    return (
       {/* onSubmit事件绑定到form标签上 */}
       <form onSubmit={submitHandler}>              
              <button type="submit">
            Login
          </button>              
              </form>
 
    )
}

export default LoginForm

• 你也可以选择给按钮绑定onClick事件并在回调中调用e.preventDefault()，但更推荐绑定<form>的onSubmit事件：这种写法同时兼容用户点击提交按钮、回车触发表单提交两种场景，更符合表单的语义规范。
• 如果修复后仍然出现刷新问题，可以检查是否有其他上层元素捕获了提交事件、或者你引入的第三方表单组件有额外的默认行为配置。

内容的提问来源于stack exchange，提问作者Pavel Sarygin