Manejo de Eventos

Eventos en React

React maneja eventos de forma similar a HTML, pero con algunas diferencias sintacticas. Los eventos en React usan camelCase (onClick en vez de onclick) y pasas funciones como manejadores de eventos.

Sintaxis Basica de Eventos

function Boton() {
  const handleClick = () => {
    alert('Boton clickeado!');
  };

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

// Funcion inline (para logica simple)
function Boton() {
  return (
    <button onClick={() => alert('Clickeado!')}>
      Hazme clic
    </button>
  );
}

Eventos Comunes

function FormularioDemo() {
  return (
    <div>
      {/* Eventos de Mouse */}
      <button onClick={() => console.log('click')}>Click</button>
      <div onMouseEnter={() => console.log('mouse enter')}>Hover</div>
      <div onMouseLeave={() => console.log('mouse leave')}>Dejar hover</div>

      {/* Eventos de Formulario */}
      <input onChange={(e) => console.log(e.target.value)} />
      <form onSubmit={(e) => { e.preventDefault(); console.log('enviado'); }}>
        <button type="submit">Enviar</button>
      </form>

      {/* Eventos de Teclado */}
      <input onKeyDown={(e) => console.log('tecla:', e.key)} />

      {/* Eventos de Foco */}
      <input onFocus={() => console.log('enfocado')} />
      <input onBlur={() => console.log('perdio foco')} />
    </div>
  );
}

El Objeto Evento

function ManejoEventos() {
  const handleClick = (evento) => {
    console.log('Tipo:', evento.type);
    console.log('Target:', evento.target);
    console.log('Coordenadas:', evento.clientX, evento.clientY);
  };

  const handleSubmit = (evento) => {
    evento.preventDefault(); // Previene el comportamiento por defecto
    console.log('Formulario enviado');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button onClick={handleClick}>Click</button>
    </form>
  );
}

Pasando Argumentos a Manejadores

function Lista() {
  const items = ['Manzana', 'Banana', 'Cereza'];

  const handleClick = (item, indice) => {
    console.log(`Clickeaste ${item} en indice ${indice}`);
  };

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