Quiero crear un formulario para una página de registro, después de ingresar el formulario y presionar enviar, el botón de arranque de reacción llamará a handleSubmit() usando onSubmit={} .
Probé varias formas de escribir onSubmit={} , puedes ver algunas de ellas en la etiqueta del Form . Ninguno de ellos funcionó. Pero el tercero, console.log() , se ejecutó dos veces cuando se hizo clic en el botón Enviar.
No sé por dónde comenzar a depurar esto, así que probé la forma de escribir onSubmit y la función
Función anónima en onSubmit={}
Función asíncrona anónima en onSubmit={}
Función anónima
Función asíncrona anónima
función de nivel superior
función asíncrona de nivel superior
onSubmit={e=>console.log(e)}
Ninguno de estos funcionó durante las pruebas.
aquí hay una muestra simplificada con el mismo problema.
import { Form, Button } from "react-bootstrap"; export default function Home() { const handleSubmit = (event) => { event.preventDefault() console.log("test"); }; return ( <> <Form noValidate // onSubmit={e=>handleSubmit(e)} onSubmit={handleSubmit} // onSubmit={console.log("hello world")} > <Form.Group> <Form.Label>Username</Form.Label> <Form.Control onChange={() => handleCheck} type="text" defaultValue={"test"} required /> </Form.Group> <Button type="submit"> Submit </Button> </Form> </> ); }handleSubmit debería obtener un preventDefault() :
const handleSubmit = (e) => { e.preventDefault() console.log("test") } También está incorporando useState pero en ningún lugar muestra cómo lo está usando. Siempre puede actualizar el estado desde handleSubmit .
Creo que he encontrado el problema.
La razón por la que uso console.log() para verificar si la función se ejecuta es porque quiero imprimir algún valor. Esperaba que se imprimiera en la terminal, pero esta es la interfaz, todo console.log() va a la consola del navegador, en lugar de a la terminal. Entonces, el código onSubmit={handleSubmit} se ejecutó correctamente.
Juega con el ejemplo oficial: Nextjs Doc: Creación de formularios