Tutoriel React, Partie 16: La quatrième phase de travail sur une application TODO, Traitement des événements

Dans la partie d'aujourd'hui de la traduction du didacticiel React, nous continuerons à travailler sur l'application Todo et à parler de la façon dont React gère les événements.



→ 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 29. Atelier. Application TODO. Étape numéro 4

→ Original

▍Emploi

La dernière fois, nous avons téléchargé la liste des tâches de l'application à partir du fichier JSON, puis, en parcourant le tableau résultant, nous avons formé, à l'aide de la méthode map() , un ensemble de composants. Nous souhaitons modifier ces données. Et nous ne pouvons le faire que si nous les préchargeons dans l'état du composant.

La tâche d'aujourd'hui consiste à convertir le composant App composant d'état et à charger les données de cas importées dans l'état de ce composant.

▍Solution

Rappelez le code du composant App déjà dans notre projet:

 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 

Afin de pouvoir modifier les données de la liste des todosData , nous devons mettre ce qui est maintenant stocké dans todosData dans l'état du composant App .

Pour résoudre ce problème, nous devons d'abord transformer le composant fonctionnel de l' App en un composant basé sur la classe. Ensuite, nous devons charger les données de todosData dans l'état et, en formant la liste des composants TodoItem , contourner non pas le tableau todosData , mais le tableau avec les mêmes données stockées dans l'état. Voici à quoi cela ressemblerait:

 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 

Il convient de noter qu'après toutes ces transformations, l'apparence de l'application n'a pas changé, mais les avoir terminées, nous l'avons préparée pour de nouveaux travaux.

Leçon 30. Gestion des événements dans React

→ Original

La gestion des événements est le moteur des applications Web et ce qui les distingue des simples sites Web statiques. La gestion des événements dans React est assez simple, elle est très similaire à la façon dont les événements sont traités en HTML standard. Par exemple, dans React, il existe des gestionnaires d'événements onClick et onSubmit , qui sont similaires aux mécanismes HTML similaires présentés sous la forme onclick et onsubmit , non seulement en termes de noms (dans React, cependant, leurs noms sont formés à l'aide d'un style chameau), mais aussi dans comment exactement ils travaillent avec eux.

Ici, nous considérerons des exemples, expérimentant une application standard créée à l'aide de create-react-app , dont le fichier de composant App contient le code suivant:

 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 

Voici à quoi ressemble notre application dans un navigateur.


Page d'application dans le navigateur

Avant de pouvoir sérieusement parler de la modification de l'état des composants à l'aide de la méthode setState() , nous devons gérer les événements et la gestion des événements dans React. Les mécanismes de traitement des événements permettent à l'utilisateur de l'application d'interagir avec lui. Une application peut répondre, par exemple, aux événements de click ou de hover , effectuant certaines actions lorsque ces événements se produisent.

La gestion des événements dans React est en fait assez simple. Si vous connaissez les mécanismes HTML standard utilisés pour affecter des gestionnaires d'événements à des contrôles, comme le onclick événements onclick , vous verrez immédiatement les similitudes avec les mécanismes que React nous propose.

Par exemple, afin de permettre au moyen du HTML qu'en cliquant sur un certain bouton une fonction soit exécutée, vous pouvez utiliser cette construction (à condition que cette fonction existe et soit accessible):

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

Dans React, comme déjà mentionné, les gestionnaires d'événements ont des noms composés selon des règles de style chameau, c'est-à-dire que onclick se transformera en onclick ici. Il en va de même pour le onMouseOver événements onMouseOver et pour les autres gestionnaires. La raison de ce changement est qu'il utilise une approche de dénomination d'entité commune à JavaScript.

Maintenant, travaillons avec notre code et faisons en sorte que le bouton réponde aux clics dessus. Au lieu de passer le code au gestionnaire pour appeler la fonction sous forme de chaîne, nous passons le nom de la fonction entre accolades. L'acquisition du fragment correspondant de notre code ressemblera maintenant à ceci:

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

Si vous jetez un œil au code du composant App que nous utilisons dans cet exemple, vous remarquerez qu'il n'y a pas encore déclaré une fonction que vous prévoyez d'appeler lorsque vous cliquez sur le bouton. En général, pour l'instant, nous pouvons très bien nous débrouiller avec une fonction anonyme déclarée directement dans le code qui décrit le bouton. Voici à quoi cela ressemblerait:

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

Maintenant, lorsque vous cliquez sur le bouton, le texte sur lequel I was clicked! .

Le même effet peut être obtenu en déclarant une fonction indépendante et en amenant le code du fichier composant sous la forme suivante:

 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 

Pour une liste complète des événements pris en charge par React, consultez cette page de documentation.

Essayez maintenant d'équiper notre application d'une nouvelle fonctionnalité. À savoir, assurez-vous que lorsque vous survolez l'image dans la console, un message s'affiche. Pour ce faire, vous devez trouver un événement approprié dans la documentation et organiser son traitement.

En fait, ce problème peut être résolu de différentes manières, nous allons démontrer sa solution en fonction de l'événement onMouseOver . Lorsque cet événement se produit, nous afficherons un message dans la console. Voici à quoi ressemblera notre code:

 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 

Le traitement des événements donne au programmeur une énorme opportunité, qui, bien sûr, ne se limite pas à la sortie de messages vers la console. À l'avenir, nous parlerons de la façon dont le traitement des événements, combiné à la possibilité de modifier l'état des composants, permettra à nos applications de résoudre les tâches qui leur sont assignées.

Comme d'habitude, nous vous recommandons de prendre le temps d'expérimenter ce que vous avez appris aujourd'hui.

Résumé

Aujourd'hui, vous avez effectué un petit travail pratique qui a jeté les bases de modifications majeures de l'application Todo et vous êtes familiarisé avec les mécanismes de gestion des événements dans React. La prochaine fois, un autre atelier vous sera proposé et un nouveau sujet vous sera présenté.

Chers lecteurs! Si vous, après vous être familiarisé avec la méthodologie de traitement des événements dans React, avez expérimenté ce que vous avez appris, veuillez nous en parler.