javascript - 提交按钮重新加载页面

Question

我正在处理登录表单，并且出现了一种奇怪的行为，每当我单击“登录”按钮时，页面都会重新加载，而无需通过“submitHandler”功能登录我的电子邮件和密码。 下面是表单的代码(我删除了很多额外的 CSS 格式和 div)。 这是表单的屏幕截图:

loginForm

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 (
       <form>              
              <button onSubmit={submitHandler} type="submit">
            Login
          </button>              
              </form>
 
    )
}

export default LoginForm

有人知道为什么点击登录按钮后页面会重新加载吗？

Answer 1

问题

该按钮是 type="submit" 但表单没有 onSubmit 处理程序，因此采取默认表单操作，即提交表单并重新加载页面.

解决方案

将 onSubmit 移至 form 元素，以便回调可以防止发生默认表单操作。

<form onSubmit={submitHandler}>              
  <button type="submit">
    Login
  </button>              
</form>