Manejar eventos

Eventos en React

Una interfaz cobra vida cuando reacciona a lo que hace el usuario. En React, escuchas eventos pasando una función manejadora a props como onClick, onChange o onSubmit. Estas props van en camelCase y reciben una función, no su resultado:

function Boton() {
  function manejarClick() {
    console.log("¡Has pulsado!");
  }
  return <button onClick={manejarClick}>Pulsa</button>;
}

Fíjate en que pasamos manejarClick (la función), no manejarClick(). Si escribieras onClick={manejarClick()} la función se ejecutaría al renderizar, no al hacer clic.

Manejadores en línea

Cuando el manejador es corto, es habitual escribirlo como una función flecha en línea. Esto también es útil cuando necesitas pasarle argumentos:

<button onClick={() => setCuenta(cuenta + 1)}>Sumar</button>
<button onClick={() => saludar("Ana")}>Saludar a Ana</button>

El objeto evento

React pasa al manejador un objeto evento (por convención lo llamamos e) con información sobre lo ocurrido y métodos útiles:

function Enlace() {
  function manejar(e) {
    e.preventDefault(); // evita el comportamiento por defecto del navegador
    console.log("clic interceptado");
  }
  return <a href="https://ejemplo.com" onClick={manejar}>No navega</a>;
}

e.preventDefault() cancela la acción por defecto del navegador: que un enlace navegue, o que un formulario recargue la página al enviarse. Lo verás constantemente al trabajar con formularios.

Hay un evento para casi todo: onClick, onChange, onSubmit, onMouseEnter, onKeyDown... Todos reciben ese objeto evento e.