¿Conoces el evento onChange en React? En React, los eventos son un tipo de función que nos permite definir una acción a ejecutar cuando ocurre una situación. Es decir, nos permiten definir cómo debe actuar nuestra aplicación en caso de que un acontecimiento ocurra. En este post, te enseñaremos qué es y cómo funciona el evento onChange en React, fundamental para controlar inputs de un formulario. Este está entre la lista de eventos React más mencionados.
¿Qué es el evento onChange en React?
En nuestro post sobre controlar input en React, te hemos enseñado que, para controlar los datos que un usuario insertar en una página de login, debemos usar una mezcla entre la propiedad value y el evento onchange react js.
El evento onChange en React, así como todos los demás eventos de esta librería de JavaScript, nos permite definir acciones a ejecutar cuando algo sucede. Al ser un evento como cualquier otro, debemos pasarle una función. Esta función recibe el evento que nos manda React, conocido como event. Event no es más que un objeto con ciertas características de limpieza que uniforman al evento para poder trabajar con él.
Cuando no conozcas cómo funciona un evento, te recomendamos que hagas un console.log del evento que estás recibiendo. Para ello, puedes insertar las siguientes líneas de código:
onChange={event => {
console.log (event(;
}}Entonces, cuando el usuario intente escribir sobre el input de usuario o contraseña, se va a ejecutar el evento onChange en React. Dentro de este evento, existe una propiedad target que guarda el elemento input. Esto quiere decir que, a través del comando event.target, podemos tener acceso a toda la API del elemento HTML. Así, podemos acceder a todos los atributos del elemento input, como lo son su type y value.
De este modo, podemos usar el comando event.target.value para hacer que se guarde el dato que inserta el usuario en nuestro input. Podemos usar la función setUsername con este comando para actualizar el dato username y hacer que el valor no solo se guarde, sino que también se modifique en nuestro input.
A continuación, te presentamos las líneas de código finales que nos permiten controlar el input sin quitarle el acceso al usuario. Para conocer el contexto detrás de estas líneas de código, te invitamos a leer nuestro post sobre crear una página de login en React.
function LoginPage ( ) {
const [username, setUsername] = useState (' ');
return )
<div className= "LoginPage">
<h1 className= "loginPage.title2>Log in to Twitter </h1>
<form>
<input
type= "test"
name= "username"
value= {username}
onChange={event => {
setUsername (event.target.value);
}}
/>
<input type= "password" name="password" />
<Button type= "submit" variant= "primary">
Log in
</Button>Para conocer más sobre el funcionamiento de este tipo de elementos en React, te recomendamos leer el post manejando eventos en la página oficial de reactjs.org. Allí, además de aprender sobre onChange form de React, aprenderás otras cosas.
¿Qué sigue?
Ahora que sabes qué es y cómo funciona el evento onChange en React, ¡es el momento de usarlo en tus propios proyectos! Para acompañarte en el proceso de desarrollo y creación de tus proyectos, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar herramientas como React, JavaScript, HTML y CSS. ¡No te lo pierdas!
