Ejecutar un submit en React es una de las acciones que más necesitaremos al crear aplicaciones con formularios. En las páginas de inicio, esta acción normalmente se ata al botón de iniciar sesión, pues nos permite conocer cuándo debemos mandar los datos del usuario para ser procesados en nuestra API. En este post, te enseñaremos cómo ejecutar un submit en React usando los estados de nuestro componente login.
¿Qué es un submit en React?
Cuando hablamos de ejecutar un submit en React, nos referimos a ejecutar una acción que envía los datos inscritos en un formulario a nuestro servidor API. Normalmente, para ejecutar un submit en React desde un elemento form, debemos recoger el evento. Gracias al comando event.target, este evento nos dirá todos los valores que existen en este formulario, incluidos los datos inscritos por el usuario. Sin embargo, no siempre debemos depender del evento. Según cómo tengamos codificado nuestro proyecto, podremos llamar a nuestro estado para acceder a los datos.
Para enseñarte cómo ejecutar un submit en React, usaremos las líneas de código que hemos escrito en nuestro post sobre automatizar evento onChange en React. Allí, hemos terminado un proceso que llevamos en varios posts para crear una página de login en React que simula a Twitter. A continuación, te presentamos estas líneas de código:
function LoginPage ( ) {
const [credentials, setCredentials] = useState ({
username: ' ',
password: ' ',
});
const {username, password} = credentials
const handlechange = event => {
setCredentials (credentials => ({
...credentials,
[event.target.name]: event.target.value,
}));
});Después de estas líneas de código, tenemos una etiqueta return con un h1 para el encabezado de la página, dos input y un botón de log in:
return (
<div className = "loginPage">
<h1 className = "loginpage-title"> Log in to Twitter </h1>
<input
type= "text"
name= "username"
value= {username}
onChange = {handleChange}
/>
<input
type= "password"
name= "password"
value= {password}
onChange = {handleChange}
/>
<Button
type= "submit"
variant= "primary"
disabled= {username || !password}
>
Log in
</Button>
</form>
</div>Como puedes ver, nuestros dos input son username y password. Ahora, como has visto en las líneas de código anteriores, hemos guardado los valores actualizados de nuestros input dentro del estado credentials, que hemos creado en nuestro post sobre unir estados en React. Es decir, las credenciales que necesitamos enviar al backend cuando montemos la llamada a nuestra API están en el estado. Esto hace que no necesitemos acceder al evento para llegar a los valores de nuestros input.
Entonces, para ejecutar un submit en React, cogeremos el estado y las credenciales guardadas dentro de él. Estas credenciales serán las que enviaremos a nuestra API para que nos devuelva algo. Cuando estamos mandando credenciales a una API, normalmente queremos que nos devuelva un token de acceso.
¿Cómo ejecutar un submit en React con estado?
Para ejecutar un submit en React, debemos pensar en qué es exactamente esta acción. Un submit es un evento y, como cualquier evento, nos permite ejecutar ciertas acciones cuando se da una situación en particular. Por lo tanto, podríamos pensar en crear un evento onClcik dentro de nuestro botón para generar esta acción. Sin embargo, la mejor manera de ejecutar un submit en React es usar el evento onSubmit de formulario. Si quieres conocer más sobre este evento, te invitamos a leer nuestro post sobre el evento onSubmit en React.
Entonces, ya que tenemos un botón submit en nuestro formulario, el evento onSubmit se activará cuando el usuario haga clic sobre el botón (este es el motivo de que no necesitemos utilizar el evento onClick). Como podrás leer en nuestro post, la función que nos permite ejecutar un submit en React se ve de la siguiente manera:
const handleSubmit = event => {
event.preventDefault ( );
console.log ('call to api', credentials)
);Esta será la función que pasemos por nuestro evento onSubmit en React. Ten en cuenta que en esta función todavía no hemos definido la llamada a nuestra API.
Mejores prácticas para el submit en React
Para optimizar el uso del submit en React, considera las siguientes prácticas, ya que estas mejoraran la calidad de tu formulario y proporcionaran una mejor experiencia a tus usuarios:
- Validación de datos: al implementar validaciones tanto en el cliente como en el servidor creas la sensación de fluidez para el usuario y aseguras la calidad de los datos.
- Manejo de errores: cuando se produce un error en el envío de formulario, es importante proporcionar feedback claro que le diga a tus usuarios que salió mal y como pueden corregirlo, esto reduce la frustración y la tasa de abandono.
- Optimización del rendimiento: utilizar técnicas como la memorización para evitar renders innecesarios, es muy útil y mejora la velocidad de formularios robustos llenos de campos y aplicaciones.
- Accesibilidad: asegurarte de que tu formulario sea accesible para todos los usuarios marca la diferencia en la vida de aquellos que tienen que utilizan lectores de pantalla.
Casos de uso del evento submit en React
El evento submit en React encuentra diversas aplicaciones en el desarrollo de interfaces web, los ejemplos comunes incluyen:
- Registro de usuarios: cuando tus usuarios crean una cuenta, este evento te permite recopilar información personal, como nombres, correos y contraseñas; para validar la cuenta a través del envío de los datos al servidor.
- Contacto: los formularios de este tipo facilitan la comunicación entre los usuarios y las empresas, puesto que permiten a los usuarios enviar mensajes o consultas fácilmente.
- Búsqueda: estos formularios facilitan filtrar contenido o realizar consultas en una base de datos, enviando los datos al servidor y dan la orden para obtener los datos relevantes.
- Compras en línea: mejora la recolección y el procesamiento de información para envíos y pagos de compras en tiendas virtuales.
- Encuestas y formularios de opinión: ayuda en la recopilación de información y opiniones de los usuarios a través de formularios estructurados, que envían las respuestas al servidor para su análisis posterior.
Después de leer este post, sabes exactamente cómo ejecutar un submit en React, cuáles son las mejores prácticas y los casos de uso más comunes de este evento en los fomularios. Sin embargo, todavía queda mucho por aprender para dominar esta herramienta.
Por ello, te invitamos a dar el siguiente paso en tu proceso de aprendizaje con nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás lenguajes y herramientas de programación para web, como React, JavaScript, HTML y CSS. ¿A qué estás esperando para dar este paso? ¡Te esperamos para acompañarte en tu camino hacia el éxito!
