🎯 Manejo de eventos en React: clics, formularios y más

🎯 Manejo de eventos en React: clics, formularios y más

En React, los eventos se manejan de manera muy similar a HTML, pero con algunas diferencias importantes:

• ✅ Los nombres de los eventos usan camelCase (ej. onClick, onChange).
• ✅ Se pasan funciones como manejadores de eventos, no cadenas de texto.
• ✅ Los eventos en React son Synthetic Events, lo que garantiza compatibilidad entre navegadores.

---

1️⃣ Evento onClick básico

Ejemplo de un botón que muestra un mensaje al hacer clic:

function handleClick() {
  alert("¡Has hecho clic en el botón!");
}

function App() {
  return <button onClick={handleClick}>Clic aquí</button>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

---

2️⃣ Manejo de formularios con onChange

React permite controlar los inputs de formularios mediante estados y el evento onChange:

function App() {
  const [value, setValue] = React.useState("");

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>Texto ingresado: {value}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Texto ingresado: ...

---

3️⃣ Evitar llamadas inmediatas

No se debe llamar a la función directamente en el atributo del evento, sino pasar la referencia:

// ❌ Incorrecto
<button onClick={handleClick()}>Clic</button>

// ✅ Correcto
<button onClick={handleClick}>Clic</button>
  

---

4️⃣ Pasar argumentos a la función manejadora

Si necesitas pasar argumentos, se puede usar una función flecha:

function greet(name) {
  alert(`Hola, ${name}!`);
}

<button onClick={() => greet('Ana')}>Saludar</button>
  

---

5️⃣ Eventos más comunes en React

• onClick: clic de botón o elemento
• onChange: cambios en inputs, selects o textareas
• onSubmit: envío de formularios
• onMouseEnter / onMouseLeave: eventos de ratón
• onKeyDown / onKeyUp: eventos de teclado

💡 React unifica todos los eventos bajo SyntheticEvent para mayor compatibilidad y consistencia.

← Volver al índice