Los eventos son “acciones” del usuario que se pueden controlar en una aplicación de JavaScript, como por ejemplo, un clic de mouse, un movimiento del mouse, presionar una tecla, etc.
En React, se manejan de manera muy similar a como se manejan los eventos en DOM, pero con algunas diferencias clave:
1. Los eventos de React se nombran usando camelCase, en lugar de minúsculas.
2. Con JSX, pasa una función como el controlador del evento, en lugar de un string.
Por ejemplo, el evento HTML “onclick” en JSX es “onClick”.
```jsx
```
Donde “actionFunction” es la función que se ejecutará cuando ocurra el evento.
3. En React no puedes retornar “false” para prevenir el comportamiento predeterminado. Debes llamar preventDefault explícitamente.
```jsx
function handleSubmit(event) {
event.preventDefault();
// …
}
```
Una característica importante a tener en cuenta es que en React, los eventos no burbujean (no se propagan) de la misma manera que lo hacen en el DOM. En el DOM, si blanco del evento es un elemento hijo y el evento no se maneja (es decir, no se detiene con event.stopPropagation()), entonces el evento se propagará hasta su elemento padre para ver si hay algún controlador que pueda manejar el evento allí.
Sin embargo, en React, los eventos se propagan a través de una fase de captura y una fase de burbuja, independientemente de la noción de eventos del DOM. Esto se llama un “modelo de eventos sintéticos” y está diseñado para asegurar que los eventos se comporten de manera consistente en todas las plataformas y navegadores.
