¿Qué son los eventos en React?
En React, los eventos son objetos que representan interacciones del usuario con la interfaz de usuario, como clics de ratón, pulsaciones de teclas y movimientos del ratón, entre otros.
Los eventos en React se basan en el sistema de eventos del DOM, pero presentan ciertas diferencias y mejoras para facilitar su uso y optimización en aplicaciones React.
Sintaxis y manejo de eventos en React
Los eventos se manejan con la notación camelCase en lugar de minúsculas.
- En HTML: se pasa una cadena de texto con la invocación de una función. Ejemplo de un evento de clic:
<button onclick="handleClick()">Click me</button>
- En React: se pasa el nombre de la función directamente como manejador del evento. Ejemplo de un evento de clic equivalente en React:
<button onClick={handleClick}>Click me</button>
Eventos sintéticos
React utiliza un sistema de eventos sintéticos (Synthetic Events) que es una capa de abstracción sobre los eventos del navegador.
Los Synthetic Events garantizan que los eventos se comporten de manera consistente en todos los navegadores, lo que facilita la escritura de código compatible entre diferentes entornos.
Ejemplo de un evento sintético en React:
// SyntheticEvent.jsx
export default function SyntheticEvent() {
function handleClick(event) {
console.log(event.type); // "click"
}
return (
<button onClick={handleClick}>Click me</button>
)
}
Propiedades y métodos del evento
Los Synthetic Events en React tienen las mismas propiedades y métodos que los eventos nativos del navegador. A diferencia de versiones anteriores de React, ahora los objetos de eventos sintéticos son persistentes, lo que significa que puedes acceder a sus propiedades en cualquier momento, incluso de forma asíncrona.
export default function Boton() {
function handleClick(event) {
// No es necesario event.persist() en React moderno
setTimeout(() => {
alert(event.type); // "click" - Funciona correctamente
}, 1000);
}
return (
<button onClick={handleClick}>Click me</button>
)
}
Ejemplo práctico
A continuación, se muestra un ejemplo práctico de cómo manejar un evento de clic en React utilizando una variable local para mostrar un mensaje de confirmación en respuesta a la interacción del usuario:
// ClickMessage.jsx
export default function ClickMessage() {
function handleClick() {
console.log('Button clicked!');
alert('¡Has hecho clic en el botón!');
}
return (
<div>
<p>Haz clic en el botón para ver un mensaje:</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
En este ejemplo, definimos una función handleClick
que se ejecuta cada vez que se hace clic en el botón. Dentro de handleClick
, se registra un mensaje en la consola y se muestra una alerta con un mensaje de confirmación.
Eventos de clic y eventos de formulario
En React, los eventos de clic y los eventos de formulario son esenciales para interactuar con la interfaz de usuario y gestionar las entradas del usuario. Los eventos de clic se utilizan para manejar interacciones como hacer clic en botones o enlaces, mientras que los eventos de formulario se utilizan para gestionar entradas en formularios, como el envío de datos o la validación de campos.
Para manejar un evento de clic en React, se asigna un manejador de eventos a un elemento utilizando la propiedad onClick. Este manejador es una función que se ejecuta cuando ocurre el evento de clic. A continuación, se muestra un ejemplo básico de cómo manejar un evento de clic en un botón:
// ClickButton.jsx
export default function ClickButton() {
function handleClick() {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>Click me</button>
);
}
En este ejemplo, cuando se hace clic en el botón, se ejecuta la función handleClick, que muestra una alerta con un mensaje de confirmación.
Los eventos de formulario son igualmente importantes y se manejan de manera similar. Para gestionar el envío de un formulario, se utiliza el evento onSubmit. Es fundamental prevenir el comportamiento predeterminado del envío del formulario, que recarga la página, utilizando event.preventDefault(). Aquí hay un ejemplo de cómo manejar el envío de un formulario en React:
// Formulario.jsx
import { useState } from 'react';
export default function Formulario() {
const [inputValue, setInputValue] = useState('');
function capturarEnvio(event) {
event.preventDefault();
console.log('Formulario enviado:', inputValue);
}
function capturarCambio(event) {
setInputValue(event.target.value);
}
return (
<form onSubmit={capturarEnvio}>
<label>
Input:
<input type="text" value={inputValue} onChange={capturarCambio} />
</label>
<button type="submit">Submit</button>
</form>
);
}
En este ejemplo, el componente Form gestiona el estado del valor del input utilizando el hook useState
. La función handleChange
actualiza el estado cada vez que el usuario escribe en el campo de texto. Cuando el formulario se envía, la función handleSubmit
se ejecuta, previene el comportamiento predeterminado y registra el valor del input en la consola.
Además de onSubmit
, existen otros eventos de formulario que son útiles, como onChange
para manejar cambios en los campos de entrada y onFocus
y onBlur
para gestionar el enfoque y desenfoque de los elementos del formulario. Aquí hay un ejemplo que muestra cómo manejar varios eventos de formulario:
// MultiplesEventosFormulario.jsx
import { useState } from 'react';
export default function MultiplesEventosFormulario() {
const [inputValue, setInputValue] = useState('');
const [isFocused, setIsFocused] = useState(false);
function handleChange(event) {
setInputValue(event.target.value);
}
function handleFocus() {
setIsFocused(true);
}
function handleBlur() {
setIsFocused(false);
}
function handleSubmit(event) {
event.preventDefault();
console.log('Formulario enviado:', inputValue);
}
return (
<form onSubmit={handleSubmit}>
<label>
Input:
<input
type="text"
value={inputValue}
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
/>
</label>
<button type="submit">Submit</button>
{isFocused && <p>Input is focused</p>} {/* muestra un mensaje si el input tiene el foco */}
</form>
);
}
En este ejemplo, la función handleFocus
establece el estado isFocused
en true cuando el input está enfocado y handleBlur
lo establece en false cuando el input pierde el enfoque. Esto permite mostrar un mensaje adicional cuando el input está activo.
Argumentos en eventos y prevenir comportamiento predeterminado
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
En React, los manejadores de eventos pueden recibir argumentos adicionales además del propio evento. Esto es útil cuando se necesita pasar información adicional al manejador de eventos. La forma más común de hacerlo es utilizando una función de flecha para envolver el manejador del evento.
Ejemplo de cómo pasar argumentos adicionales a un manejador de eventos:
// BotonEvento.jsx
export default function BotonEvento({ id }) {
function handleClick(id, event) {
console.log('Botón clickeado con id:', id);
console.log('Tipo de evento:', event.type);
}
return (
<button onClick={(event) => handleClick(id, event)}>
Clicame
</button>
);
}
En este ejemplo, la función handleClick
recibe tanto el argumento id
como el objeto event
. Al hacer clic en el botón, se imprimirá el id
del botón y el tipo de evento en la consola.
Además de pasar argumentos, es fundamental en muchas situaciones prevenir el comportamiento predeterminado de los eventos.
En este ejemplo, handleClick
previene el comportamiento predeterminado del enlace utilizando event.preventDefault()
. puedes tener un enlace que, en lugar de navegar a una nueva página, realiza una acción específica en la aplicación.
Ejemplo de cómo prevenir el comportamiento predeterminado en un enlace:
// Link.jsx
export default function Link() {
function handleClick(event) {
event.preventDefault();
console.log('Link clickeado, pero navegación prevista.');
}
return (
<a href="https://example.com" onClick={handleClick}>
Click me
</a>
);
}
En este ejemplo, al hacer clic en el enlace, handleClick
previene la navegación predeterminada utilizando event.preventDefault()
, y en su lugar, imprime un mensaje en la consola.
El manejo de argumentos en eventos y la prevención del comportamiento predeterminado son técnicas esenciales para controlar las interacciones del usuario y la lógica de la aplicación en React. Utilizando estas técnicas, se puede crear una experiencia de usuario más fluida y personalizada.
Propagación de eventos
En React, la propagación de eventos sigue un modelo similar al del DOM nativo, donde los eventos pueden propagarse a través de una fase de captura y una fase de burbujeo. Sin embargo, React implementa su propio sistema de eventos sintéticos, lo que permite un manejo más consistente y unificado de los eventos en diferentes navegadores.
Fase de burbujeo y fase de captura
Los eventos en React pueden propagarse a través de dos fases:
- Fase de captura: El evento se propaga desde el elemento raíz hacia el elemento objetivo.
- Fase de burbujeo: El evento se propaga desde el elemento objetivo hacia el elemento raíz.
Por defecto, React maneja los eventos en la fase de burbujeo. Sin embargo, es posible especificar que un evento debe ser manejado en la fase de captura utilizando el prefijo on
seguido de Capture
.
Ejemplo de manejo de eventos en ambas fases:
// MiEventoCaptureBurbujeo.jsx
export default function MiEventoCaptureBurbujeo() {
function manejarClickCaptura(event) {
console.log('Fase de captura: ', event.target.tagName);
}
function manejarClickBurbujeo(event) {
console.log('Fase de burbujeo: ', event.target.tagName);
}
return (
<div onClickCapture={manejarClickCaptura} onClick={manejarClickBurbujeo}>
<button>Clic aquí</button>
</div>
);
}
En este ejemplo, manejarClickCaptura
se ejecutará durante la fase de captura y manejarClickBurbujeo
durante la fase de burbujeo. Al hacer clic en el botón, primero se registrará la fase de captura y luego la fase de burbujeo.
Detener la propagación de eventos
Es posible detener la propagación de un evento en cualquier fase utilizando el método event.stopPropagation()
. Esto es útil para evitar que un evento manejado en un componente hijo se propague a un componente padre.
Ejemplo de detener la propagación de eventos:
// PropagacionEvento.jsx
export default function PropagacionEvento() {
function manejarClick(event) {
event.stopPropagation();
console.log('El botón fue clickeado y la propagación detenida');
}
function manejarClickPadre() {
console.log('El contenedor fue clickeado');
}
return (
<div onClick={manejarClickPadre}>
<button onClick={manejarClick}>Clic aquí</button>
</div>
);
}
En este ejemplo, al hacer clic en el botón, manejarClick
detiene la propagación del evento, por lo que manejarClickPadre
no se ejecutará.
Contexto this en eventos
Nota: La siguiente sección es principalmente para entender y mantener código legacy de React. En aplicaciones modernas, se recomiendan componentes funcionales y hooks en lugar de componentes de clase.
En los componentes de clase de React, el contexto this
en los manejadores de eventos necesita atención especial. Cuando se define un manejador de eventos, el contexto this
no está automáticamente vinculado al componente, lo que puede causar errores.
A continuación se presentan tres métodos comunes para manejar correctamente el contexto this
en componentes de clase:
Métodos para vincular this
en manejadores de eventos
Enlazar en el constructor: Se enlaza el contexto this
del componente al manejador de eventos en el constructor del componente.
// BindInConstructor.jsx
import { Component } from 'react';
export default class BindInConstructor extends Component {
constructor(props) {
super(props);
this.manejarClick = this.manejarClick.bind(this);
}
manejarClick() {
console.log('El botón fue clickeado por', this);
}
render() {
return <button onClick={this.manejarClick}>Clic aquí</button>;
}
}
Propiedades de clase con funciones flecha: Esta es la forma recomendada, las funciones flecha no tienen su propio contexto this
; en su lugar, heredan el contexto this
de su contexto envolvente. Esto elimina la necesidad de enlazar explícitamente this
.
// BindArrowFunc.jsx
import { Component } from 'react';
export default class BindArrowFunc extends Component {
manejarClick = () => {
console.log('El botón fue clickeado por', this);
}
render() {
return <button onClick={this.manejarClick}>Clic aquí</button>;
}
}
Enlazar directamente en el render: Aunque es posible, esta técnica no es recomendada debido a que crea una nueva función en cada renderizado, lo que puede tener implicaciones en el rendimiento.
// BindInRender.jsx
import { Component } from 'react';
export default class BindInRender extends Component {
manejarClick() {
console.log('El botón fue clickeado por', this);
}
render() {
return <button onClick={this.manejarClick.bind(this)}>Clic aquí</button>;
}
}
Eventos comunes en React
Para facilitar el trabajo con eventos, aquí hay una lista de algunos de los eventos más comunes en React:
Eventos de Mouse
onClick
: Se dispara cuando se hace clic en un elementoonDoubleClick
: Se dispara con doble cliconMouseEnter
: Se dispara cuando el puntero entra en un elementoonMouseLeave
: Se dispara cuando el puntero sale de un elemento
Eventos de Formulario
onChange
: Se dispara cuando cambia el valor de un elemento de formularioonSubmit
: Se dispara cuando se envía un formularioonFocus
: Se dispara cuando un elemento recibe el focoonBlur
: Se dispara cuando un elemento pierde el foco
Eventos de Teclado
onKeyDown
: Se dispara cuando se presiona una teclaonKeyPress
: Se dispara cuando se presiona y suelta una tecla (obsoleto, usar onKeyDown)onKeyUp
: Se dispara cuando se suelta una tecla
Eventos de Toques (móviles)
onTouchStart
: Se dispara cuando se inicia un toqueonTouchMove
: Se dispara cuando un punto de toque se mueveonTouchEnd
: Se dispara cuando se termina un toque
Todos estos eventos siguen la misma sintaxis de manejo que hemos visto en los ejemplos anteriores.
Pequeño ejemplo práctico
Este ejercicio demostrará cómo manejar eventos de clic en React para crear un contador simple que se incrementa y decrementa al hacer clic en botones, puedes hacerlo tu mismo para comprobar el funcionamiento:
- Crea una carpeta
components
dentro desrc
- Definimos
components/Contador.jsx
:
import { useState } from 'react';
export default function Contador() {
const [contador, setContador] = useState(0);
const incrementarContador = () => {
setContador(contador + 1);
};
const decrementarContador = () => {
setContador(contador - 1);
};
return (
<div>
<h2>Contador: {contador}</h2>
<button onClick={incrementarContador}>Incrementar</button>
<button onClick={decrementarContador}>Decrementar</button>
</div>
);
}
- Modificamos
App.jsx
:
import Contador from './Contador';
import './App.css';
function App() {
return (
<div>
<header>
<Contador />
</header>
</div>
);
}
export default App;
- Ejecutamos
npm run dev
en la terminal de VSCode para visualizar en el navegador:
Aprendizajes de esta lección
- Comprender qué son y cómo funcionan los eventos en React.
- Manejar eventos usando la sintaxis de React.
- Utilizar eventos sintéticos para garantizar la compatibilidad entre navegadores.
- Gestionar la propagación de eventos y detenerla cuando sea necesario.
- Controlar el contexto
this
en los eventos dentro de los componentes de clase. - Implementar eventos de clic y eventos de formulario en aplicaciones React.
Completa React y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs