Los eventos juegan un papel fundamental en las aplicaciones React, ya que permiten interacciones del usuario que pueden desencadenar cambios en el estado. En esta sección, aprenderemos cómo manejar eventos y cómo actualizar el estado en respuesta a estos eventos tanto en componentes funcionales como en componentes de clase.

Eventos en React

React normaliza los eventos nativos del navegador para asegurarse de que los eventos se comporten de manera consistente en todos los navegadores. Para manejar eventos en React, se utilizan nombres de eventos camelCase y se pasan funciones como manejadores de eventos.

Sintaxis Básica:

jsx

Manejo de Eventos en Componentes Funcionales

En componentes funcionales, los eventos se manejan mediante funciones normales o funciones flecha, y la actualización del estado se realiza a través de hooks como useState.

Ejemplo Simple:

jsx

Manejo de Eventos en Componentes de Clase

En componentes de clase, los eventos se manejan típicamente con métodos de instancia. Es necesario enlazar (bind) estos métodos para asegurar que this se refiere al componente correcto.

Ejemplo Simple:

jsx

Enlazado de Métodos en Componentes de Clase

Es importante recordar que en componentes de clase, debes enlazar los métodos de manejo de eventos para asegurarte de que this apunta al componente adecuado.

Métodos de Enlazado:

1. En el Constructor:

jsx

2. Función Flecha como Propiedad de Clase:

jsx

Eventos Comunes en React

onClick

El evento onClick se dispara cuando un elemento es clicado.

jsx

onChange

El evento onChange se utiliza comúnmente con inputs para capturar cambios en los valores.

jsx

onSubmit

El evento onSubmit se dispara cuando un formulario es enviado.

jsx

Ejemplo Práctico: Formulario de Registro

Componente Funcional:

jsx

Componente de Clase:

jsx

Imagen Explicativa

El manejo de eventos y la actualización del estado son piezas clave para crear aplicaciones React interactivas y dinámicas. En la próxima sección, aprenderemos sobre el Paso de Estado entre Componentes con Props, que es crucial para compartir datos y coordinar acciones entre diferentes partes de una aplicación React.