【问题标题】：Submit button reloads the page提交按钮重新加载页面
【发布时间】：2021-11-12 00:23:00
【问题描述】：

我正在处理一个登录表单，我遇到了一个奇怪的行为，即每当我单击“登录”按钮时，页面只是重新加载，而无需通过“提交处理程序”功能登录我的电子邮件和密码。下面是表单的代码（我删除了很多额外的 CSS 格式和 div）。这是表格的截图：

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

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

【问题讨论】：

您的处理程序必须在表单上而不是在按钮上
您甚至不一定需要form 元素或type="submit" which means you don't need preventDefault`。 input 和 button 元素可以与 form 一起存在。

标签： javascript html css reactjs button

【解决方案1】：

问题

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

解决方案

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

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

这是一个例子，

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

其他答案也可以，但我想换个角度。

【讨论】：