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.
¿Cuál es el siguiente paso?
Después de leer este post, sabes exactamente cómo ejecutar un submit en React. 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!
