Los eventos en React son uno de los elementos más importantes de esta librería de JavaScript. De una manera similar a las promesas y las etiquetas condicionales en Javascript, los eventos nos permiten crear asincronía al ejecutar acciones solo cuando ciertas situaciones se dan. Por ello, en este post, te enseñaremos qué es y cómo funciona el evento onSubmit en React, fundamental para el desarrollo de aplicaciones con formularios (React form Onsubmit).
¿Qué es el evento onSubmit en React?
El evento onSubmit en React es uno de los muchos eventos disponibles en esta librería Javascript. Puede que ya conozcas los eventos onClick y onChange en React. Para conocer más sobre los distintos eventos que existen en React, te recomendamos leer el post manejando eventos en reactjs.org.
En particular, onSubmit es un evento de formulario que nos permite ejecutar un submit en React. Es decir, react onsubmit preventdefault nos permite ejecutar acciones cuando el usuario de clic en un botón de tipo submit. La acción más común a dejar preparada en un evento onSubmit es la llamada a la API, con la que podemos mandar y procesar los datos insertados en un formulario (React form Onsubmit). Si quieres saber más sobre cómo ejecutar esta acción de onSubmit, te recomendamos leer nuestro post sobre ejecutar un submit en React.
¿Cómo funciona el evento onSubmit en React?
Cada vez que te encuentres con un nuevo evento dentro de React, te recomendamos usar el comando console.log para revisar qué es lo que nos devuelve este evento. Recuerda que este comando es utilizado en JavaScript para pintar nuestros elementos en pantalla. Entonces, para entender cómo funciona el evento onSubmit en React, podrías escribir la siguiente línea de código:
//react on submit
<form onSubmit = {event => console.log (event)}>
</form>
Como mencionamos antes, cuando tenemos un botón con una propiedad type=”submit”, el evento onSubmit en React se activará al hacer clic sobre el botón. Este botón normalmente es con el que el usuario inicia sesión y puede tener cualquier texto de los eventos React. Por esto, puedes clicar sobre el botón de tu componente para ver lo que nos da este evento.
Al ejecutar esta acción, verás que el console.log se pinta en pantalla y luego desaparece. También notarás que la URL de tu localhost cambia. Esto sucede porque el comportamiento predeterminado de los formularios HTML dispara una recarga. Además, este comportamiento por defecto hace que se muestren los valores del formulario en la URL (React form Onsubmit).
Mantener el comportamiento por defecto de un formulario HTML es una mala práctica tanto para la seguridad como para nuestra aplicación. Por un lado, no debemos mostrar los valores de un input por nuestra URL. Por el otro lado, no queremos que cada vez que ejecutemos submit de onSubmit JavaScript se efectúe una recarga, pues es como estar inicializando nuestra aplicación cada vez.
Para cambiar el comportamiento de un evento onSubmit en React, usamos el comando event.preventDefault. Así, podemos guardar esta acción en una función que llamaremos handleSubmit del submit React:
//react form onsubmit preventdefault
handleSubmit = (event) => {
event.preventDefault ( );
}
Luego, podremos pasar la función handleSubmit por nuestro evento onSubmit en cualquier proyecto para eventos React. Este tipo de recodificaciones son buenas prácticas, pues nos permiten reutilizar código. Es decir, si tenemos otro formulario dentro de nuestro proyecto que requiera de un onSubmit del submit React, podremos llamar a la función handleSubmit en vez de tener que insertar el preventDefault en cada ocasión.
Crear la función handleSubmit de onSubmit JavaScript también nos permite tener un código más limpio con los eventos React. Es decir, tendremos un proceso de render de nuestro componente más limpio. Por ello, aunque podríamos declarar la función dentro de nuestro return, es mejor hacerlo en una función fuera de ella y luego llamar la función de onSubmit JavaScript.
Dentro de la función que controla nuestro evento onSubmit en React, deberemos pasar el estado que guarda las credenciales que queremos mandar. Dentro de esta función también haremos la llamada a nuestro API desde el submit React.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo usar el evento onSubmit en React para procesar tus formularios, ¡es momento de crear y desarrollar tus propios proyectos en esta herramienta! Para aprender a desarrollar proyectos y aplicaciones, no solo en React sino también en otros lenguajes de programación como JavaScript, HTML y CSS, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Anímate a seguir aprendiendo con nosotros e inscríbete!
