¿Qué es onChange React?
La práctica de automatizar un evento onChange en React nos permite ejecutar acciones generales desde una misma función. En este post, te enseñaremos cómo automatizar un evento onChange en React para simplificar el código de tus componentes.
¿Qué es el evento onChange en React?
El evento onChange en React es una de las funciones predeterminadas en React que nos permiten definir una acción a ejecutar cuando una situación ocurre. Este evento se utiliza comúnmente para tratar los datos introducidos por el usuario en un formulario. Por ello, lo hemos aprendido a usar en nuestro post sobre controlar input en React. Si quieres conocer más sobre cómo funcionan los eventos en React, te invitamos a leer el artículo sobre manejar eventos en reactjs.org.
En nuestro post sobre unir estados en React, te hemos enseñado que, cuando tenemos dos o más estados que se procesen de manera similar en nuestro proyecto, podemos unirlos en uno solo para simplificar nuestro código. En este post, hemos creado un estado credentials para unir los estados de usuario y contraseña de un formulario en una página login. A continuación, puedes ver las líneas de código de una página que simula la página de acceso de Twitter:
//onchange html
function LoginPage ( ) {
const [credentials, setCredentials] = useState ({
username: ' ';
password: ' ',
});
return (
<div className= "loginPage">
<h1 className= "loginPage-title">Log in to Twitter </h1>
<form>
<input
type= "text"
name= "username"
value= {credentials.username}
onChange= {event => {
username: event.target.value,
password: credentials.password,
});
}}
/>
//onchange mdn
<input
type="password"
name= "password"
value= {credentials.password}
onChange= {event =>
setCredentials ({
username: credentials.username,
password:event.target.value,
})
}}
/>En las líneas de código anteriores, hemos usado el estado credentials para definir cómo se comporta el evento onChange en cada uno de los input. Para ello, definimos qué acción se ejecuta para cada clave de credentials en cada input. Es decir, para username hemos hecho que solo la clave username se actualice según event.target.value, mientras que password toma su valor original (un string vacío). Lo mismo sucede, pero al contrario, en el input de password.
Definir el evento on change en cada input es muy sencillo cuando tenemos un formulario con solo dos datos. Sin embargo, este no siempre es el caso. Por ello, a continuación te enseñaremos cómo automatizar un evento onChange en React.
¿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!
