Eventos en React
Código
Una aplicación web tiene dos tareas esenciales: presentar información al usuario y “reaccionar” a acciones que el usuario realiza. Hasta ahora hemos visto como presentar información - creando componentes para renderizar cierto contenido - pero, ¿cómo reaccionar a una acción del usuario?.
Reaccionar al usuario es conocido como manejar eventos y esto es algo que javascript ya implementa por medio de los eventos del DOM.
Los eventos en React son similares a los eventos del DOM, con pequeñas diferencias.
- Los eventos en React son nombrados en
camelCase
por ejemplo .onClick
. - El evento que pasas como argumento es una función y no un string como en el DOM.
Otra diferencia se encuentra en una práctica común al escribir HTML y vanilla JS: utilizar return false;
para evitar el comportamiento por defecto del evento en cuestión. En React debes utilizar explicitamente preventDefault
. ¿por qué? React no expone los eventos del DOM directamente, al contrario, expone una API llamadas SyntheticEvent
.
Estos eventos son implementados de forma compatible con todos los navegadores (basados en el spec W3C). Cuando defines un manejador de eventos como onClick
la función que defines como argumento recibe un evento sintético. Este evento tiene la misma interfaz que los eventos nativos del navegador, por lo que su uso se hace "conocido”.
La idea de usar esta API es que React normaliza los eventos para hacer que funcionen de la misma manera en todos los navegadores.
Ahora, volviendo al uso de preventDefault
. ¿Cómo evitas el comportamiento por defecto de un evento?. Simplemente accediendo al argumento evento y llamando preventDefault
Una práctica común, es utilizar los eventos para pasar ciertos datos de un lado a otro, por ejemplo para pasar el id
de algún elemento para crear una llamada al servidor, para lograr esto debes pasar argumentos extra a la función que usas como manejador de eventos, para hacer esto simplem`nte rodeas tu función con otra función.
🐾 Primeros Pasos
En esta lección trabajaremos agregando estilos utilizando los dos métodos base para definir el css de tus componentes.
Para esta lección usaremos algunos elementos que solicitan acciones de usuario para así capturar sus eventos, también crearemos un componente con el mismo objetivo
- Boton
- Selectbox
- Input
- div: Si!. En React es posible agregar un manejador de eventos a cualquier componente. Los eventos de React son “sintéticos” y puede ser utilizados en cualquier elemento.
🎯 Objetivos
- Aprender como agregar eventos a un elemento.
- Conocer como manejar los eventos definidos.
- Conocer como definir componentes que acepten eventos.
🏋️♂️ Ejercicios
- Crea un elemento botón que al ser clickeado muestra un alerta.
- Crea un elemento
select
que al cambiar el valor seleccionado muestra una alerta con el valor. - Crea un elemento input que muestra en consola lo que se escribe.
🍬 Crédito Extra
- Crea un componente
Button
que acepta una proponClick
. Esta función estará definida en el componente padre.
Transcripción
En esta lección revisaremos eventos. Una aplicación tiene dos tareas esenciales, mostrar información y permitir al usuario interactuar con dicha información. Para aquellos se utilizan los eventos del navegador, los eventos del DOM.
Esto es algo que siempre se ha hecho en JavaScript utilizando la API del DOM, pero React ofrece una API similar para manejar los eventos. La diferencia es que se escriben camel case como están en este ejemplo.
Otra diferencia es que la API implementa un tipo de event llamado evento sintético y tiene algunas diferencias con los eventos del spec que podemos ver acá, como por ejemplo, el uso de preventDefault que sirve para evitar el comportamiento por defecto de un evento llamando a event.preventDefault como función.
Una práctica común es utilizar los eventos para pasar datos entre componentes o situaciones.
Lo primero que haremos será manejar algunos elementos de formulario. Aprenderemos como agregar eventos a un elemento creando un elemento botón, clicándolo, utilizando el elemento select o utilizando un input.
Finalmente, tendremos un crédito extra que revisaremos a continuación.