Misión 1 · Lección 3

Manejo de Eventos en React

Objetivos

• Comprender cómo se manejan los eventos en React.
• Usar funciones para responder a interacciones del usuario.
• Aprender a pasar parámetros en eventos.
• Conocer eventos comunes como onClick, onChange, onSubmit.

Eventos en React

• Se parecen a los del DOM, pero con sintaxis camelCase.
• Ejemplo: en HTML se usa onclick, en React es onClick.
• React usa un sistema de eventos sintéticos para unificar navegadores.

Ejemplo: onClick

export default function Boton() {
  function manejarClick() {
    alert("¡Botón clickeado!");
  }

  return <button onClick={manejarClick}>Haz clic aquí</button>;
}

Acceso al objeto evento

export default function Input() {
  function manejarCambio(e) {
    console.log("Valor:", e.target.value);
  }

  return <input type="text" onChange={manejarCambio} />;
}

El parámetro e es un evento sintético con propiedades similares a un evento del DOM.

Prevenir comportamiento por defecto

export default function Enlace() {
  function manejarClick(e) {
    e.preventDefault(); // evita que el link navegue
    alert("Navegación bloqueada");
  }

  return (
    <a href="https://react.dev" onClick={manejarClick}>
      Ir a React
    </a>
  );
}

Pasar parámetros en eventos

export default function Producto({ id }) {
  function manejarClick(idProducto) {
    console.log("Producto clickeado:", idProducto);
  }

  return (
    <button onClick={(e) => manejarClick(id)}>
      Ver Producto
    </button>
  );
}

Eventos comunes en React

• onClick → clic en un botón o elemento.
• onChange → cambios en inputs, selects.
• onSubmit → envío de formularios.
• onMouseOver / onMouseOut → interacción con el mouse.
• onKeyDown, onKeyUp → interacción con el teclado.

Ejemplo: Formulario con onSubmit

export default function Formulario() {
  function manejarSubmit(e) {
    e.preventDefault();
    alert("Formulario enviado");
  }

  return (
    <form onSubmit={manejarSubmit}>
      <input type="text" placeholder="Escribe algo" />
      <button type="submit">Enviar</button>
    </form>
  );
}

Ejercicio Guiado 🛠️

1. Crea un componente <FormularioTarea /> con un input y un botón.
2. Usa onChange para capturar el texto escrito.
3. Usa onSubmit para mostrar el valor en un alert.
4. Extra: añade un botón "Limpiar" que reinicie el campo.