..
Copyright (c) 2025 Allan Avendaño Sudario
Licensed under Creative Commons Attribution-ShareAlike 4.0 International License
SPDX-License-Identifier: CC-BY-SA-4.0
===========================================
Guía 14: React - Eventos y Hooks (useState)
===========================================
.. topic:: Objetivo específico
:class: objetivo
Gestionar la interactividad del dashboard mediante eventos del usuario y el uso de hooks como useState y useRef, permitiendo actualizar el estado de la interfaz de forma reactiva y eficiente.
Actividades previas
=====================
Ambiente de desarrollo
----------------------
1. Acceda a su proyecto *dashboard* en Codespaces o en su máquina local.
2. Cree y utilice la(s) rama(s) de desarrollo.
3. Instale los paquetes y levante el servidor, con:
.. code-block:: bash
npm install
npm run dev
Actividades en clases
=====================
React: Eventos y Hooks
----------------------
.. note::
Considere la explicación del uso de hooks en `React Hooks - Tutorial `_ y del manejo de eventos en `Tutorial React: Eventos en React `_.
Selector
^^^^^^^^
1. Cree el archivo `src/components/SelectorUI.tsx`.
2. Utilice la documentación del componente `Select `_ para crear el componente funcional `SelectorUI`, con el siguiente código:
.. code-block:: tsx
:emphasize-lines: 1-25
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
export default function SelectorUI() {
return (
Ciudad
)
}
3. En el archivo `src/App.tsx`, importe y use el componente `SelectorUI` en la sección para el **Selector**.
4. Compruebe la vista previa del resultado en el navegador.
5. Con un cliente de IAG, compare el uso del DOM versus el uso del DOM Virtual de React.
Evento: onChange
^^^^^^^^^^^^^^^^
1. Utilice su cliente de IAG, para modificar el componente `SelectorUI` con el siguiente código:
a) Importe el tipo `SelectChangeEvent` desde la librería `@mui/material/Select`
b) Dentro del componente `SelectorUI`, declare una función flecha `handleChange`, que:
(i) Recibe el parámetro **event** de tipo `SelectChangeEvent`
(ii) Muestra en una ventana emergente el valor actual del elemento que generó el evento.
c) Modifique el componente `Select` de MUI para asignar la función `handleChange` al evento `onChange`.
.. dropdown:: Ver la solución
:color: success
.. code-block:: tsx
:emphasize-lines: 2,7-9,15
...
import Select, { type SelectChangeEvent } from '@mui/material/Select';
...
export default function SelectorUI() {
const handleChange = (event: SelectChangeEvent) => {
alert(event.target.value)
};
return (
...
...
)
}
2. Compruebe la vista previa del resultado en el navegador.
3. Con un cliente de IAG, explique la sintaxis y manejo de eventos sintéticos en React.
Hooks: useState
^^^^^^^^^^^^^^^^
1. Utilice su cliente de IAG, para modificar el componente `SelectorUI` con el siguiente código:
a) Importe el :term:`hook` **useState** desde la librería de React para poder manejar el estado interno del componente.
b) Dentro del componente, declare una :term:`variable de estado` llamada **cityInput** junto con su :term:`función de actualización` **setCityInput**.
c) Dentro de la función `handleChange`, reemplace el código anterior por una llamada a la función de actualización `setCityInput` con el valor seleccionado (event.target.value).
d) En el `