Estoy trabajando en un formulario de inicio de sesión y tengo un comportamiento extraño por el cual cada vez que hago clic en el botón 'Iniciar sesión', la página simplemente se vuelve a cargar, sin ingresar mi correo electrónico y contraseña a través de la función 'submitHandler'. A continuación se muestra un código del formulario (eliminé muchos formatos CSS adicionales y div). Aquí hay una captura de pantalla del formulario:
formulario de inicio de sesión
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¿Alguien tiene idea de por qué la página se vuelve a cargar después de hacer clic en el botón de inicio de sesión?
El botón es del type="submit" , pero el formulario no tiene un controlador onSubmit y, por lo tanto, realiza la acción de formulario predeterminada, es decir, envía el formulario y vuelve a cargar la página.
Mueva onSubmit al elemento de form para que la devolución de llamada pueda evitar que se produzca la acción de formulario predeterminada.
<form onSubmit={submitHandler}> <button type="submit"> Login </button> </form>También puede convertir el submit del proveedor del método button type="" a button , en algunos casos realmente no desea enviar un formulario interno, así que tenga en cuenta.
Aquí está el ejemplo,
<form> <button onSubmit={submitHandler} type="button"> </form>Otra respuesta también está bien, pero me gustaría abordar desde un ángulo diferente.
Intente llamar a submitHandler con onSubmit en el formulario en lugar de en el botón.