Eventos en React
Mostrar una alerta a hacer click
Para completar este primer ejercicio solo requieres crear un elemento <button> y definir el evento onClick.
Crear un elemento select
En este caso, debes definir el evento onChange y definir que función se ejecutará.
La función, en este caso llamada onSelectChange recibirá un evento, en donde puedes acceder a los atributos del elemento que recibió el evento.
Crear un elemento input
De forma similar al ejercicio anterior, el elemento input también lanza el evento onChange cada vez que el contenido del input cambiar. Para capturar ese valor basta con definir una función que recibirá el evento y acceder a sus propiedades como event.target.value.
Crea un componente Button que acepta una prop onClick. Esta función estará definida en el componente padre.
Este ejercicio extra si bien es similar al anterior ejercicio de crar un botón tiene como objetivo reforzar el hecho de que en React un componente es sólo una función.
La función Button recibe como parámetros un objeto llamado props y dentro de dicho objeto irá una propiedad llamada onClick que recibirá una función.
Esta prop onClick es entonces pasada como argumento al evento onClick del botón
Transcripción
Bueno, abrimos nuestro index.html como siempre, tenemos aquí nuestro ejercicio y un script de ejemplo donde tenemos aquí, primero seleccionamos el root, tenemos varias funciones que completar.
Nuestro primer ejercicio es crear un elemento que al ser cliqueado muestre un alert utilizando una función en la prop onClick, para eso crearemos un simple botón onClick usando CamelCase, interpolamos, escribimos una función que llama a un alert que dice botón presionado, simplemente ahora terminamos de crear nuestro botón, revisamos que se esté renderizando la aplicación, npm, run dev, lección 10 y visitamos localhost 3000 y tenemos nuestro botón, si ahora hacer click, perfecto, el alert se vuelve a estar en pantalla.
Sigamos con el segundo ejercicio, utilizando el arreglo de opciones que está definido más arriba utilizaremos un select para permitir que al seleccionar las diferentes opciones se muestre un evento, para esto utilizamos el método onChange y asignamos la función predefinida onSelectChange, función que tenemos que definir aquí, en el evento es un objeto que viene con varios atributos entre ellos target, si hacemos event.target.value podemos ver en el alert el elemento o opción que hemos elegido, ahora vamos al ejercicio número 3, nos dice que creemos un input que tenemos aquí y utilicemos el método onChange con la función onInputChange para capturar lo que se escribe en él, vamos a la función onInputChange nuevamente utilizaremos event.target para acceder al valor.value y poder escribir en consola el contenido del input.
Podemos ver aquí que al escribir en el input se actualiza inmediatamente la consola, ahora para nuestros créditos extra necesitamos crear un nuevo evento, crearemos un componente llamado button que simplemente retorna un botón que recibe una prop llamada onClick, una prop que tenemos que definir en nuestro componente, por lo tanto recibimos esta prop aquí onClick y ahora utilizaremos nuestro nuevo botón llamándolo como un componente JSX, abrimos llaves, button, onClick y definimos que función le pasaremos, le llamaremos onClickButton, ahora tenemos que definir la función onClickButton, simplemente será un nuevo alert que dice que el componente button fue clickeado, perfecto, crédito extra completado.