💫12) Manejo de eventos

Handling Events

Manejar eventos con react es muy parecido a manejar eventos del DOM. Hay algunas pequeñas diferencias de sintaxis:

• React nombra a los eventos utilizando camel case.

• Cuando utilizamos JSX pasamos una function al event handler, en el caso de HTML pasamos un string.

Veamos un ejemplo.

with-html.html

<button onclick="execute()">
  Label
</button>

En el código de arriba, estamos utilizando el DOM directamente, ahora veamos cómo sería utilizando JSX y un element de react.

with-react.js

const execute = () => console.log('click');

<button onClick={execute}>
  Label
</button>

Cómo verás tiene algunos pequeños cambios. El primero es que cambiamos el nombre del evento onclick por onClick. El segundo es cómo pasamos la function que queremos ejecutar, en el caso de HTML se pasa un string, con react se pasa directamente la function.

Estos son todos los eventos que soporta react.

Prevent default

Otra diferencia es que no podemos retornar false para evitar el comportamiento por defecto de un elemento HTML. Esto es algo común cuando queremos ejecutar una function dentro de un <a> ya que por defecto el elemento <a> intenta navegar.

Imaginemos que tenemos un botón que es un elemento <a> de HTML. Queremos ejecutar una function cuando un usuario haga click en él y además queremos evitar que navegue. Veamos cómo lo haríamos con HTML y cómo con react.

Con HTML:

<a href="#" onclick="console.log('The button was clicked.'); return false">
  Click me
</a>

Con react:

const handleClick = (event)=> {
    event.preventDefault();
    console.log('The button was clicked.');
};

const button = () => (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
);

Como verás nuestra function handleClick recibe un parámetro event automáticamente. Event es un objeto que contiene toda la info del evento ocurrido, además nos brinda diferentes métodos cómo preventDefault() para que utilicemos en nuestro event handler.

Si quieres aprender mas sobre cómo manejar los eventos en react ingresa aquí:

Handling Events – React