Submit按钮重新加载页面

Question

我正在做一个登录表单，我得到了一个奇怪的行为，即每当我点击' login '按钮，页面只是重新加载，没有登录我的电子邮件和密码通过'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

Issue

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

<标题>

解决方案将onSubmit移动到form元素，这样回调可以防止默认表单操作的发生。

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

Answer 2

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

下面是例子，

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

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

Answer 3

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