Tutoriel React, partie 23: Leçon sur les premiers formulaires

Dans cette partie de la traduction du didacticiel React, nous parlerons de l'utilisation des formulaires. En particulier, la leçon d'aujourd'hui est consacrée à l'organisation de l'interaction des composants et des champs de texte.



→ 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 41. Utilisation des formulaires, partie 1

→ Original

Les formulaires sont une partie importante des applications Web. Mais, il s'est avéré que les personnes impliquées dans le développement de React, travaillant avec des formulaires, posent généralement certaines difficultés. Le fait est que React travaille avec les formulaires d'une manière spéciale. Dans cette leçon, nous utiliserons le projet standard créé par create-react-app, dont la forme initiale du fichier App.js est présentée ci-dessous.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Veuillez noter que pour maîtriser le matériel de cette leçon, vous devez être familier avec le concept de l'état de l'application. Si vous avez suivi toutes les leçons précédentes du cours et terminé des ateliers de manière indépendante, cela signifie que vous avez les connaissances dont vous aurez besoin ici. Voici la documentation React sur les formulaires. Il est recommandé de la regarder avant de continuer.

Ainsi, dans React, les formulaires fonctionnent un peu différemment que l'utilisation de JavaScript standard. À savoir, dans l'approche habituelle, les formulaires sont décrits en utilisant HTML sur les pages Web, après quoi, en utilisant l'API DOM, ils interagissent avec eux à partir de JavaScript. En particulier, en cliquant sur le bouton Soumettre, ils collectent les données des champs renseignés par l'utilisateur et les préparent pour l'envoi au serveur, en les vérifiant et, si nécessaire, en informant l'utilisateur qu'il a mal rempli certains champs. Dans React, au lieu d'attendre que tous les matériaux soient entrés dans les champs du formulaire avant de poursuivre leur traitement logiciel, les données sont constamment surveillées en utilisant l'état de l'application. Cela, par exemple, se résume au fait que chaque caractère entré par l'utilisateur à partir du clavier entre immédiatement dans l'état. Par conséquent, dans l'application React, nous pouvons rapidement travailler avec la dernière version de ce que l'utilisateur entre dans les champs du formulaire. Afin de démontrer cette idée en action, nous commençons par une description du formulaire contenant un champ de texte normal.

Pour ce faire, dans le code renvoyé par la méthode render() , nous décrivons le formulaire. Dans l'approche habituelle, un tel formulaire aurait un bouton, en cliquant sur lequel les mécanismes du programme de l'application commenceraient à traiter les données saisies dans ce formulaire. Dans notre cas, les données saisies par l'utilisateur dans le champ iront à l'application au fur et à mesure de leur saisie. Pour ce faire, nous devons gérer l' onChange champ onChange . Dans le gestionnaire de cet événement (appelons-le handleChange() ), nous mettrons à jour l'état en lui écrivant ce qui est entré dans le champ. Pour ce faire, nous devons, premièrement, découvrir ce qui est contenu dans le champ, et deuxièmement, mettre ces données dans un état. En l'état, créez une propriété qui stocke le contenu du champ. Nous allons utiliser ce champ pour stocker le prénom de l'utilisateur, nous allons donc appeler la propriété correspondante firstName et l'initialiser avec une chaîne vide.

Après cela, dans le constructeur, nous y attacherons le gestionnaire d'événements handleChange() et dans le code du gestionnaire, nous utiliserons la fonction setState() . Étant donné que la valeur précédente qui était stockée dans la propriété d'état firstName ne nous intéresse pas, nous pouvons simplement passer un objet avec la nouvelle valeur firstName à cette fonction. Que faut-il écrire sur cette propriété?

Si vous vous souvenez du fonctionnement des gestionnaires d'événements en JavaScript, il s'avère que lorsqu'ils sont appelés, des paramètres prédéfinis leur sont transmis. Dans notre cas, l'objet d'événement est passé au gestionnaire. Il contient les données qui nous intéressent. Le champ de texte dont nous event.target est représenté dans cet objet par event.target . Et le contenu de ce champ est accessible à l'aide de la construction event.target.value .

Maintenant, dans la méthode render() , nous allons afficher ce qui sera stocké dans l'état et regarder ce que nous avons obtenu.

Voici le code qui implémente les idées ci-dessus.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           firstName: event.target.value       })   }     render() {       return (           <form>               <input type="text" placeholder="First Name" onChange={this.handleChange} />               <h1>{this.state.firstName}</h1>           </form>       )   } } export default App 

Voici à quoi tout cela ressemble dans le navigateur.


Page d'application dans le navigateur

Chaque caractère entré dans le champ apparaît immédiatement dans l'élément <h1> présent sur la page.

Voyons maintenant comment ajouter un autre champ au formulaire, pour le nom de famille de l'utilisateur. Évidemment, afin d'établir le traitement correct des données saisies dans ce champ, nous devrons ajouter une autre propriété à l'état et travailler sur des mécanismes qui mettent à jour l'état lors de la saisie des données dans le champ.

Une approche pour résoudre ce problème consiste à créer un gestionnaire d'événements distinct pour le nouveau champ. Pour un petit formulaire avec plusieurs champs de saisie, c'est une approche tout à fait normale, mais si nous parlons d'un formulaire avec des dizaines de champs, la création d'un gestionnaire d'événements onChange distinct pour chacun d'eux n'est pas une bonne idée.

Afin de distinguer les champs dans le même gestionnaire d'événements lorsqu'il est modifié, nous assignerons les propriétés de name aux champs, que nous rendrons exactement les mêmes que les noms des propriétés utilisées pour stocker les données de champ dans l'état ( firstName et lastName ). Après cela, nous pouvons, en travaillant avec l'objet d'événement transmis au gestionnaire, trouver le nom du champ, les modifications qui ont conduit à son appel et utiliser ce nom. Nous allons l'utiliser en définissant le nom de la propriété d'état dans laquelle nous voulons ajouter des données mises à jour. Voici le code qui implémente cette fonctionnalité:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />               <br />               <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Notez qu'en définissant le nom de propriété de l'objet passé à setState() , nous event.target.name construction event.target.name entre crochets rectangulaires.


Page d'application dans le navigateur

La page affiche maintenant ce qui est entré dans le premier champ et ce qui est entré dans le deuxième champ.

Les principes de travail avec les champs de texte que nous venons d'examiner sont également valables pour d'autres champs basés sur eux. Par exemple, il peut s'agir de champs pour saisir des adresses e-mail, des téléphones, des numéros. Les données saisies dans ces champs peuvent être traitées à l'aide des mécanismes évoqués ci-dessus, pour le fonctionnement desquels il est important que les noms de champs correspondent aux noms des propriétés à l'état du composant qui stockent les données de ces champs.

Nous parlerons de l'utilisation d'autres éléments de formulaire dans la prochaine leçon. Nous aborderons ici un autre sujet relatif au soi-disant «composant contrôlé», sur lequel vous, si vous avez regardé la documentation React sur les formulaires, avez déjà lu quelque chose.

Si nous voulons que ce qui est affiché dans le champ corresponde exactement à ce qui est stocké dans l'état de l'application, nous pouvons utiliser l'approche décrite ci-dessus, dans laquelle l'état est mis à jour lorsque vous entrez des données dans le champ. La condition est réactive. Et lorsque vous utilisez des éléments de formulaire qui sont des composants gérés, ce qui est affiché dans ces éléments est contrôlé par l'état. C'est avec cette approche qu'elle est la seule source de données réelles sur les composants. Pour cela, il suffit d'ajouter l'attribut value au code décrivant l'élément de formulaire, en indiquant la propriété state correspondant au champ. Voici à quoi ressemblera le code d'application.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Après ces modifications, l'application fonctionne exactement comme auparavant. La principale différence avec sa version précédente est que le champ affiche ce qui est stocké dans l'état.

Je veux donner un conseil qui vous évitera à l'avenir des erreurs très difficiles à déboguer. Voici à quoi ressemble maintenant le code du gestionnaire d'événements onChange:

 handleChange(event) {   this.setState({       [event.target.name]: event.target.value   }) } 

Il est recommandé qu'au lieu d'accéder directement aux propriétés de l'objet event lors de la construction de l'objet passé à setState() , extrayez à l'avance ce dont vous avez besoin:

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

Ici, nous n'entrerons pas dans les détails concernant les erreurs qui peuvent être évitées en construisant des gestionnaires d'événements de cette façon. Si vous êtes intéressé, consultez le SyntheticEvent dans la documentation React.

Résumé

Dans cette leçon, vous vous êtes d'abord familiarisé avec les mécanismes de travail avec les formulaires dans React. La prochaine fois, nous continuerons sur ce sujet.

Chers lecteurs! Utilisez-vous des bibliothèques supplémentaires lorsque vous travaillez avec des formulaires dans React?