¿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.
¿Cómo automatizar un evento onChange en React?
Para automatizar un evento onChange en React crearemos una función al inicio de nuestro componente. Nosotros hemos decidido llamar esta función handleChange, pues se encargará de controlar los cambios de este evento. Recuerda que puedes llamar a las funciones como quieras dentro de tu proyecto. Lo importante es que, tanto las funciones como los componentes y objetos, tengan un nombre con el que sea fácil identificar su propósito.
En la función handleChange copiaremos la función del evento onChange en React que estamos manejando en nuestro componente. Es decir, para automatizar un evento onChange en React, necesitamos crear una función que llame al evento y nos devuelva el estado que estamos controlando. Así quedaría la función si copiamos el evento onChange del input «username»:
const handleChange = event => {
setCredentials ({
username: event.target.value,
password: credentials.password,
});
},Ahora, debemos transformar esta función para que pueda manejar los eventos onChange en React de todos los input. Esto nos permitirá escribir en el evento onChange de cada input la función handleChange directamente en vez de crear una función para cada dato.
Entonces, cuando username dispare la función, queremos modificar la clave username del objeto credentials. Del mismo modo, cuando la función la dispare password, queremos modificar la clave password. Esto quiere decir que podemos usar la propiedad name del input para definir quién cambia. Para ello, usamos el comando event.target.name y event.target.value.
const handleChange = event => {
setCredentials ({
[event.target.name] : event.target.value,
});
},En la anterior función, estamos creando un nuevo objeto que tiene como clave el nombre que nos envíe el evento, y como valor, el valor que nos envíe el evento. Sin embargo, en esta función no estamos logrando automatizar un evento onChange en React, ya que todavía nos falta definir qué parte del evento se mantiene intacto.
Para mantener lo que existía antes dentro de un objeto, usaremos el spread en React. Recuerda que este símbolo nos permite hacer una copia del objeto al que llamamos. Entonces, si lo insertamos antes de [event.target.name]:event.target.value, solo se mantendrán los valores que esta línea de código no modifica:
const handleChange = event => {
setCredentials ({
…credentials
[event.target.name] : event.target.value,
});
},
Lo que estamos haciendo aquí es crear un nuevo objeto que copia el estado antiguo y sobrescribe la parte que nos interesa modificar. De este modo, podemos automatizar un evento onChange en React.
Aprende más sobre onChange React…
Ahora que sabes qué es y cómo automatizar un evento onChange en React, ¡es la hora de utilizarlo en tus propios proyectos! Si todavía no sabes cómo desarrollar un proyecto de programación, no te preocupes, en KeepCoding estamos para guiarte. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar herramientas de programación para la web, tales como React, JavaScript, HTML y CSS. ¿A qué esperas para empezar a desarrollar? ¡Te esperamos!
