7.1-Eventos en React

 Tutorial de Eventos en React para Principiantes

¡Claro que puedo ayudarte! En este tutorial aprenderás sobre los eventos en React, incluyendo los eventos más comunes y especialmente los eventos para formularios como onChange.

¿Qué son los eventos en React?

Los eventos en React son similares a los eventos en el DOM estándar, pero con algunas diferencias sintácticas:

1. Los nombres de eventos en React son camelCase (ej. onClick en lugar de onclick)

2. Con JSX pasas una función como manejador del evento en lugar de un string

Eventos Básicos

1. onClick

El evento más común, se dispara cuando se hace clic en un elemento.

jsx-onClick

function App() {
  const handleClick = () => {
    alert('¡Hiciste clic!');
  };

  return (
    <button onClick={handleClick}>
      Haz clic aquí
    </button>
  );
}

2. onSubmit

Se usa principalmente en formularios cuando se envía el formulario.

jsx-onSubmit

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault(); // Previene el comportamiento por defecto del formulario
    alert('Formulario enviado');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Enviar</button>
    </form>
  );
}

Eventos para Formularios

3. onChange (Muy importante)

Se dispara cuando el valor de un elemento de formulario cambia. Es esencial para formularios controlados en React.

jsx-onChange

function InputExample() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
    console.log('Nuevo valor:', e.target.value);
  };

  return (
    <input 
      type="text" 
      value={value} 
      onChange={handleChange} 
      placeholder="Escribe algo..."
    />
  );
}

4. onFocus y onBlur

• onFocus: Se dispara cuando el elemento recibe el foco

• onBlur: Se dispara cuando el elemento pierde el foco

jsx-onFocus y onBlur

function FocusExample() {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <div>
      <input
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        placeholder="Haz clic aquí"
      />
      <p>{isFocused ? 'El input tiene foco' : 'El input no tiene foco'}</p>
    </div>
  );
}

Eventos del Teclado

5. onKeyDown, onKeyPress, onKeyUp

jsx-onKeyDown, onKeyPress, onKeyUp

function KeyExample() {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      alert('Presionaste Enter');
    }
  };

  return (
    <input 
      type="text" 
      onKeyDown={handleKeyDown} 
      placeholder="Presiona Enter..."
    />
  );
}

Eventos del Ratón

6. onMouseEnter, onMouseLeave

jsx-onMouseEnter, onMouseLeave

function MouseExample() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        padding: '20px',
        backgroundColor: isHovered ? 'lightblue' : 'white'
      }}
    >
      {isHovered ? '¡El ratón está aquí!' : 'Pasa el ratón por aquí'}
    </div>
  );
}

Manejo de Eventos con Parámetros

Si necesitas pasar parámetros adicionales a tu manejador de eventos:

jsx-Manejo de Eventos con Parámetros

function List() {
  const items = ['Manzana', 'Banana', 'Naranja'];

  const handleClick = (item, e) => {
    console.log('Hiciste clic en:', item);
    console.log('Evento:', e);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={(e) => handleClick(item, e)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

Buenas Prácticas

1. Nombres descriptivos: Usa nombres como handleClick, handleChange para tus manejadores de eventos.

2. Componentes controlados: Para formularios, usa el patrón de componentes controlados con value y onChange.

3. Evita arrow functions en el render: Para mejor performance, define los manejadores como métodos de clase o fuera del componente.

jsx
import { useState } from 'react';

function FormularioSimple() {
  const [nombre, setNombre] = useState('');

  const handleChange = (e) => {
    setNombre(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Nombre enviado:', nombre);
    alert(`Nombre enviado: ${nombre}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Nombre:
          <input
            type="text"
            value={nombre}
            onChange={handleChange}
          />
        </label>
      </div>
      
      <button type="submit">Enviar</button>
    </form>
  );
}

Ejemplo Completo con Formulario

jsx

Copy

Download

import { useState } from 'react';

function FormularioCompleto() {
  const [formData, setFormData] = useState({
    nombre: '',
    email: '',
    aceptaTerminos: false
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Datos enviados:', formData);
    alert(`Formulario enviado: ${JSON.stringify(formData, null, 2)}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Nombre:
          <input
            type="text"
            name="nombre"
            value={formData.nombre}
            onChange={handleChange}
          />
        </label>
      </div>
      
      <div>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </label>
      </div>
      
      <div>
        <label>
          <input
            type="checkbox"
            name="aceptaTerminos"
            checked={formData.aceptaTerminos}
            onChange={handleChange}
          />
          Acepto los términos y condiciones
        </label>
      </div>
      
      <button type="submit">Enviar</button>
    </form>
  );
}

Conclusión

Los eventos en React son fundamentales para crear aplicaciones interactivas. El evento onChange es especialmente importante para manejar formularios. Recuerda que:

1. Los eventos en React usan camelCase

2. Pasa funciones como manejadores, no strings

3. Usa e.preventDefault() cuando necesites evitar el comportamiento por defecto

4. Para formularios, combina value con onChange para crear componentes controlados

¡Practica con estos ejemplos y pronto dominarás el manejo de eventos en React!