Tutoriel React Partie 18: La sixième phase de travail sur une application TODO

Dans la partie d'aujourd'hui de la traduction du didacticiel React, vous êtes invité à continuer à travailler sur l'application Todo et à vous assurer que cliquer sur les drapeaux affecte l'état du composant.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 33. Atelier. Application TODO. Étape numéro 6

→ Original

▍Emploi

Dans cette leçon pratique, nous allons continuer à travailler sur l'application Todo et nous assurer que les actions de l'utilisateur affectent l'état du composant. Il s'agit de nous permettre de marquer les éléments de la liste de tâches comme terminés ou non terminés. Vous trouverez ci-dessous le code du composant App , certaines des pièces et des commentaires disponibles dans lesquels sont conçus pour vous aider à terminer la tâche. En fait, voici ce que vous êtes invités à faire aujourd'hui:

1. Créez un gestionnaire d'événements dans le composant App qui répond aux changements d'indicateur (nous parlons de l'événement onChange ) et modifie l'état de l'application en conséquence. C'est peut-être la partie la plus difficile de la tâche d'aujourd'hui. Pour y faire face - faites attention aux commentaires et aux blancs fournis dans le code.
2. Passez la méthode appropriée au composant TodoItem .
3. Dans le composant TodoItem créez un mécanisme qui, lorsque l'événement onChange , appelle la méthode transmise à l'instance de composant et lui transmet l'identificateur de cas ( id ), qui correspond à l'indicateur sur lequel l'utilisateur a cliqué.

Voici le code du composant App :

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

▍Solution

Pour commencer, créez un mécanisme simple pour vérifier l'appel à la méthode handleChange() . A savoir, nous l'amenons sous cette forme:

 handleChange(id) {   console.log("Changed", id) } 

Nous mettons actuellement en œuvre ce qui doit être fait conformément aux paragraphes 2 et 3 de la mission. C'est-à-dire que nous allons créer une connexion entre cliquer sur l'indicateur et appeler la méthode handleChange() en lui passant l' id cet indicateur.

Afin de passer une référence à handleChange() à une instance du composant TodoItem , nous pouvons faire la même chose que lui passer des propriétés et réécrire le code pour créer la liste des composants comme ceci:

 const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>) 

Notez que la propriété handleChange , qui sera disponible pour les composants TodoItem , contient une référence à la méthode handleChange de l'instance du composant App . Dans le composant TodoItem , cette méthode est accessible de la même manière que les autres propriétés qui lui sont transmises. À ce stade, le code TodoItem ressemble à ceci:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => console.log("Changed!")}           />           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

Pour appeler la méthode handleChange dans le code du composant, vous pouvez utiliser une construction de la forme props.handleChange() . Dans ce cas, cette méthode doit passer l' id élément. Le onChange événements onChange accepte un objet événement. Nous n'avons pas besoin de cet objet pour appeler la méthode handleChange() . Nous réécrivons le code dans lequel nous affectons le gestionnaire d'événements onChange à l'élément, comme suit:

 onChange={(event) => props.handleChange(props.item.id)} 

Ici, nous appelons la méthode handleChange() , en lui passant l'identifiant d'élément tiré des propriétés qui lui sont passées, d'une autre fonction qui accepte l'objet événement. Puisque nous n'utilisons pas cet objet ici, le code peut être réécrit comme ceci:

 onChange={() => props.handleChange(props.item.id)} 

Essayez maintenant d'exécuter l'application et, en ouvrant la console, cliquez sur les cases à cocher.


Test de la méthode handleChange ()

Les messages contenant des identifiants de drapeaux par lesquels nous cliquons parviennent à la console. Mais les indicateurs ne changent pas encore l'apparence, car la méthode handleChange() pas encore implémenté de mécanisme pour changer l'état d'un composant. En conséquence, nous venons de faire face aux deuxième et troisième parties de la mission et maintenant nous pouvons commencer à travailler sur sa première partie, peut-être la plus intéressante de toutes, concernant le travail avec l'État.

Pour commencer, nous devons résoudre le problème concernant l'état dans lequel un tableau est stocké dans un état, dont un élément, en réponse à un clic sur un indicateur, doit subir des modifications, mais nous ne devons pas modifier le tableau stocké dans l'ancienne version de l'état. Cela signifie, par exemple, que vous ne pouvez pas simplement parcourir un tableau d'objets déjà dans un état, trouver l'élément nécessaire et modifier sa propriété completed . Nous avons besoin qu'après avoir changé l'état, un nouveau tableau soit formé, dont l'un des éléments sera modifié, et le reste restera le même qu'avant. L'une des approches de la formation d'un tel tableau est l'utilisation de la méthode du tableau map() , mentionnée dans les commentaires de la tâche. Nous allons écrire le code dans la méthode setState() . handleChange() code de la méthode handleChange() du composant App au formulaire suivant:

 handleChange(id) {   this.setState(prevState => {         }) } 

Maintenant, en utilisant la méthode map() , nous allons parcourir le tableau prevState.todos et rechercher l'élément dont nous avons besoin, c'est-à-dire celui dont l' id est passé à la méthode handleChange() , puis changer sa propriété completed . La méthode map() renvoie un nouveau tableau, qui sera utilisé dans le nouvel état de l'application, nous allons donc écrire ce tableau dans une constante. Voici à quoi ça ressemble:

 handleChange(id) {   this.setState(prevState => {       const updatedTodos = prevState.todos.map(todo => {           if (todo.id === id) {               todo.completed = !todo.completed           }           return todo       })       return {           todos: updatedTodos       }   }) } 

Ici, pendant le traitement du tableau à l'aide de map() , si un élément dont l' id est égal à l' id passé à la méthode handleChange() est handleChange() , la valeur de la propriété completed de cet élément est inversée ( true à false et vice versa). Après cela, que l'élément ait été modifié ou non, map() renvoie cet élément. Il tombe dans un nouveau tableau (représenté par la constante updatedTodos ) sous le même index sous lequel l'élément correspondant était dans le tableau todos de la version précédente de l'état. Une fois que l'ensemble du tableau est analysé et que le tableau updatedTodos est entièrement formé, ce tableau est utilisé comme valeur de la propriété todos de l'objet renvoyé par la méthode setState() , qui est une nouvelle version de l'état.

Si vous démarrez l'application maintenant, vous pouvez constater que les drapeaux répondent à nos effets. Cela suggère que cliquer dessus modifie l'état de l'application, après quoi ils sont restitués à l'aide de nouvelles données.

Résumé

Aujourd'hui, nous avions à notre disposition une application Todo fonctionnelle, lors de l'écriture, sur laquelle nous avons utilisé de nombreux concepts React que nous avons étudiés. En fait, il est encore tout à fait possible de l'affiner, en particulier, de le styliser et d'étendre ses capacités. Nous lui reviendrons dans l'une des classes suivantes.

Chers lecteurs! Avez-vous géré le travail pratique d'aujourd'hui?