Evento onChange en React

Autor: | Última modificación: 13 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿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.

¿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.

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.

¿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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!