El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos cómo manejar eventos en React. Los eventos en React son muy similares a los eventos en el DOM, pero hay algunas diferencias clave que debemos tener en cuenta.

Conceptos Clave

Eventos Sintéticos: React crea un objeto de evento sintético que envuelve el evento nativo del navegador. Esto asegura que los eventos sean consistentes entre diferentes navegadores.
Manejo de Eventos: En React, los manejadores de eventos se pasan como funciones en lugar de cadenas de texto.
Binding de this: En los componentes de clase, es necesario enlazar el contexto this para que los métodos puedan acceder a las propiedades del componente.

Ejemplo Básico de Manejo de Eventos

Componente Funcional

import React from 'react';

function ClickButton() {
  const handleClick = () => {
    alert('¡Botón clickeado!');
  };

  return (
    <button onClick={handleClick}>
      Clickeame
    </button>
  );
}

export default ClickButton;

Explicación

Definición del Manejador de Eventos: handleClick es una función que se ejecutará cuando el botón sea clickeado.
Asignación del Evento: El evento onClick del botón se asigna a la función handleClick.

Componente de Clase

import React, { Component } from 'react';

class ClickButton extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('¡Botón clickeado!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Clickeame
      </button>
    );
  }
}

export default ClickButton;

Explicación

Constructor y Binding: En el constructor, enlazamos this.handleClick al contexto this del componente.
Definición del Manejador de Eventos: handleClick es un método de la clase que se ejecutará cuando el botón sea clickeado.
Asignación del Evento: El evento onClick del botón se asigna al método handleClick.

Eventos Comunes en React

Evento	Descripción
`onClick`	Se dispara cuando se hace clic.
`onChange`	Se dispara cuando cambia un valor.
`onSubmit`	Se dispara cuando se envía un formulario.
`onMouseOver`	Se dispara cuando el ratón pasa sobre un elemento.
`onFocus`	Se dispara cuando un elemento recibe el foco.

Ejercicio Práctico

Ejercicio

Crea un componente que tenga un campo de texto y un botón. Cuando el usuario escriba en el campo de texto y haga clic en el botón, muestra una alerta con el texto ingresado.

Solución

import React, { useState } from 'react';

function TextInputAlert() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleClick = () => {
    alert(`Texto ingresado: ${text}`);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleClick}>Mostrar Alerta</button>
    </div>
  );
}

export default TextInputAlert;

Explicación

Estado del Componente: Utilizamos el hook useState para manejar el estado del texto ingresado.
Manejador de Cambio: handleChange actualiza el estado text cada vez que el usuario escribe en el campo de texto.
Manejador de Clic: handleClick muestra una alerta con el texto ingresado cuando se hace clic en el botón.

Errores Comunes y Consejos

Olvidar el Binding de this: En los componentes de clase, es común olvidar enlazar el contexto this en el constructor.
Eventos Sintéticos: Recuerda que los eventos en React son sintéticos y pueden comportarse de manera diferente a los eventos nativos del DOM.
Funciones Inline: Evita definir funciones inline en el JSX, ya que puede afectar el rendimiento. Define las funciones fuera del JSX y luego asígnalas.

Conclusión

En esta lección, hemos aprendido cómo manejar eventos en React tanto en componentes funcionales como de clase. Hemos visto ejemplos prácticos y discutido algunos errores comunes. Ahora estás listo para manejar eventos en tus aplicaciones React de manera efectiva.

En la próxima lección, exploraremos el renderizado condicional en React, lo que te permitirá mostrar u ocultar componentes basados en ciertas condiciones.

Manejo de Eventos en React

Conceptos Clave

Ejemplo Básico de Manejo de Eventos

Componente Funcional

Explicación

Componente de Clase

Explicación

Eventos Comunes en React

Ejercicio Práctico

Ejercicio

Solución

Explicación

Errores Comunes y Consejos

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa