Tutorial de React, Parte 16: La cuarta fase de trabajar en una aplicación TODO, Procesamiento de eventos

En la parte de hoy de traducir el tutorial de React, continuaremos trabajando en la aplicación Todo y hablaremos sobre cómo React maneja los eventos.



→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 29. Taller. TODO aplicación. Etapa número 4

→ Original

▍Trabajo

La última vez, descargamos la lista de tareas para la aplicación del archivo JSON, y luego, recorriendo la matriz resultante, formamos, usando el método map() , un conjunto de componentes. Nos gustaría modificar estos datos. Y solo podemos hacer esto si los precargamos en el estado del componente.

La tarea de hoy es convertir el componente de la App en un componente de estado y cargar los datos del caso importados en el estado de ese componente.

▍Solución

Recuerde el código del componente de la App que ya está en nuestro proyecto:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

Para poder modificar los datos de la lista de tareas, debemos poner lo que ahora está almacenado en todosData en el estado del componente de la App .

Para resolver este problema, primero debemos transformar el componente funcional de la App en un componente basado en la clase. Luego, necesitamos cargar los datos de todosData en el estado y, al formar la lista de componentes de TodoItem , no todosData matriz todosData , sino la matriz con los mismos datos almacenados en el estado. Así es como se vería:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component {   constructor() {       super()       this.state = {           todos: todosData       }   }     render() {       const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)             return (           <div className="todo-list">               {todoItems}           </div>       )   } } export default App 

Cabe señalar que después de todas estas transformaciones, la apariencia de la aplicación no ha cambiado, pero una vez completadas, la preparamos para seguir trabajando en ella.

Lección 30. Manejo de eventos en React

→ Original

El manejo de eventos es lo que impulsa las aplicaciones web y lo que las distingue de los sitios web estáticos simples. El manejo de eventos en React es bastante simple, es muy similar a cómo se procesan los eventos en HTML normal. Entonces, por ejemplo, en React hay controladores de eventos onClick y onSubmit , que son similares a los mecanismos HTML similares presentados en forma de onclick y onsubmit , no solo en términos de nombres (en React, sin embargo, sus nombres se forman usando un estilo camel), sino también en cómo trabajan exactamente con ellos.

Aquí consideraremos ejemplos, experimentando con una aplicación estándar creada usando create-react-app , cuyo archivo de componente de App contiene el siguiente código:

 import React from "react" function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button>Click me</button>       </div>   ) } export default App 

Así es como se ve nuestra aplicación en un navegador.


Página de aplicación en el navegador

Antes de que podamos hablar seriamente sobre la modificación del estado de los componentes utilizando el método setState() , debemos tratar con los eventos y el manejo de eventos en React. Los mecanismos de procesamiento de eventos permiten al usuario de la aplicación interactuar con él. Una aplicación puede responder, por ejemplo, a eventos de click o hover , realizando ciertas acciones cuando ocurren estos eventos.

El manejo de eventos en React es bastante sencillo. Si está familiarizado con los mecanismos HTML estándar utilizados para asignar controladores de eventos a los controles, como el controlador de eventos onclick , verá inmediatamente las similitudes con los mecanismos que nos ofrece React.

Por ejemplo, para hacer posible mediante HTML que al hacer clic en un botón determinado se realice una función, puede usar esta construcción (siempre que esta función exista y sea accesible):

 <button onclick="myFunction()">Click me</button> 

En React, como ya se mencionó, los controladores de eventos tienen nombres compuestos de acuerdo con las reglas de estilo camel, es decir, onclick se convertirá en onclick aquí. Lo mismo es cierto para el onMouseOver eventos onMouseOver y para otros controladores. La razón de este cambio es porque utiliza un enfoque para nombrar entidades que es común a JavaScript.

Ahora trabajemos con nuestro código y hagamos que el botón responda a los clics en él. En lugar de pasar el código al controlador para llamar a la función como una cadena, pasamos el nombre de la función entre llaves. La adquisición del fragmento correspondiente de nuestro código ahora se verá así:

 <button onClick={}>Click me</button> 

Si observa el código del componente de la App que utilizamos en este ejemplo, notará que aún no se ha declarado una función a la que planea llamar cuando se hace clic en el botón. En general, en este momento podemos pasar bien con una función anónima declarada directamente en el código que describe el botón. Así es como se vería:

 <button onClick={() => console.log("I was clicked!")}>Click me</button> 

Ahora cuando haces clic en el botón, ¡el texto en el que I was clicked! .

Se puede lograr el mismo efecto declarando una función independiente y llevando el código del archivo componente a la siguiente forma:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

Para obtener una lista completa de eventos compatibles con React, consulte esta página de documentación.

Ahora intente equipar nuestra aplicación con una nueva característica. Es decir, asegúrese de que cuando pasa el cursor sobre la imagen en la consola, se muestra un mensaje. Para hacer esto, necesita encontrar un evento adecuado en la documentación y organizar su procesamiento.

De hecho, este problema se puede resolver de diferentes maneras, demostraremos su solución en onMouseOver evento onMouseOver . Cuando ocurra este evento, mostraremos un mensaje en la consola. Así se verá nuestro código ahora:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

El procesamiento de eventos le brinda al programador una gran oportunidad que, por supuesto, no se limita a enviar mensajes a la consola. En el futuro, hablaremos sobre cómo el procesamiento de eventos, combinado con la capacidad de cambiar el estado de los componentes, permitirá que nuestras aplicaciones resuelvan las tareas que se les asignaron.

Como de costumbre, recomendamos tomarse un tiempo para experimentar con lo que aprendió hoy.

Resumen

Hoy hiciste un pequeño trabajo práctico que sentó las bases para cambios importantes en la aplicación Todo y te familiarizaste con los mecanismos de manejo de eventos en React. La próxima vez se le ofrecerá otro taller y se presentará un nuevo tema.

Estimados lectores! Si, después de familiarizarse con la metodología de procesamiento de eventos en React, experimentó con lo que aprendió, cuéntenoslo.