React Básico

Inicio / Tema / React Básico / Event Handling en React

Event Handling en React

El manejo de eventos en React es fundamental para hacer que nuestras aplicaciones respondan a la interacción del usuario. En este capítulo, aprenderemos cómo manejar eventos como clics de botones, envío de formularios y más, utilizando componentes funcionales y la sintaxis de JSX.

React usa un sistema de eventos que es muy similar a los eventos nativos de JavaScript, pero con algunas diferencias clave que lo hacen más eficiente y fácil de usar. Veamos cómo funciona.

Manejo Básico de Eventos

Al igual que en HTML, en React puedes manejar eventos como onClick, onChange, y onSubmit. Sin embargo, en JSX, en lugar de usar minúsculas como en HTML, los nombres de los eventos se escriben en camelCase.

Por ejemplo, para manejar un clic en un botón:

jsx

"En este codigo definimos un componente funcional llamado ButtonClick. dentro de el, tenemos una función llamada handleClick que muestra una alerta cuando es llamada. El button element tiene un onClick event handler que triggea la función handleClick cuando el button es clickeado."

En este ejemplo, la función handleClick es llamada cuando el usuario hace clic en el botón. El evento onClick en React es similar al evento de clic nativo, pero es parte del sistema de eventos de React.

Pasando Argumentos a los Manejadores de Eventos

En algunos casos, querrás pasar argumentos a un manejador de eventos. Esto se puede hacer utilizando una función de flecha en el evento:

jsx

"Aqui, la función handleClick acepta un argumento, y usamos la función arrow para pasar el numero 1 como argumento al handleClick cuando el boton es clickeado."

En este ejemplo, cuando el botón es clicado, pasamos el valor 1 a la función handleClick, lo que nos permite hacer el código más dinámico.

Eventos Sintéticos en React

React utiliza un sistema de eventos sintéticos, lo que significa que los eventos en React son envueltos por una capa de abstracción que los hace funcionar de la misma manera en todos los navegadores. Esto proporciona una capa adicional de compatibilidad y eficiencia, ya que React gestiona todos los eventos en un solo listener en la raíz del documento.

Prevenir el Comportamiento por Defecto

En los eventos nativos de JavaScript, se utiliza event.preventDefault() para prevenir el comportamiento por defecto de un evento, como el envío de un formulario. En React, funciona de la misma manera:

jsx

"en este codigo definimos un componente Form con una función handleSubmit que previene el default form submission usando event.preventDefault. Form es enviado cuando el boton submit es clickeado, pero el comportamiento por defecto es bloqueado."

Aquí, el formulario no se enviará cuando el usuario haga clic en el botón de envío, gracias a la llamada a event.preventDefault().

Manejo de Eventos en Entradas y Formularios

El manejo de eventos en entradas de formularios es un caso común en aplicaciones React. Puedes usar el evento onChange para capturar los cambios en los valores de las entradas.

Ejemplo: Manejo de Entradas de Texto

Aquí tienes un ejemplo de cómo manejar la entrada de texto en un formulario:

jsx

"En este ejemplo definimos un componente TextInput que tiene un estado de texto variable. la función handleChange actualiza el texto al estado cada vez que el input value cambia, y el texto es mostrado en un parrafo debajo del input."

Aquí, el estado text se actualiza cada vez que el usuario escribe en el campo de texto. El valor actual del campo de texto se muestra dinámicamente en un párrafo.

Eventos Compuestos

Puedes manejar múltiples eventos en un solo componente. Por ejemplo, puedes manejar el evento de clic y el evento de envío en un formulario:

jsx

"En este ejemplo el boton dentro de la forma desencadena tanto las funciones handleClick como handleSumbit. handleClick es desencadenado cuando el boton es clickeado y handleSumit lo hace cuando la forma es enviada."

En este caso, cuando el botón dentro del formulario es clicado, ambos eventos onClick y onSubmit son manejados de manera eficiente.

Conclusión

El manejo de eventos en React es un proceso sencillo, pero poderoso. Al comprender cómo manejar eventos, prevenir comportamientos por defecto y actualizar el estado en respuesta a las interacciones del usuario, puedes crear aplicaciones interactivas y dinámicas.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea