提交按钮重新加载页面

Question

我正在处理一个登录表单，我遇到了一个奇怪的行为，每当我点击 'Login' 按钮时，页面就会重新加载，而无需通过 [=19] 登录我的电子邮件和密码=] 功能。下面是表格的代码（我删除了很多额外的 CSS 格式和 div's）。这是表格的屏幕截图：

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>

Answer 2

尝试在表单而不是按钮上使用 onSubmit 调用 submitHandler。

Answer 3

您还可以将按钮 type="" 方法提供程序 submit 转换为 button，在某些情况下您真的不想提交内部表单，所以请记住。

这是例子，

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

其他答案也可以，但我想从不同的角度来探讨。

提交按钮重新加载页面

Submit button reloads the page

html

javascript

css

button

reactjs

问题

解决方案