Aujourd'hui, nous poursuivons la discussion sur l'utilisation des formulaires dans React. La dernière fois, nous avons examiné les caractéristiques de l'interaction des composants et des champs de texte. Nous discutons ici de l'utilisation d'autres éléments de formulaire.
→
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 composantsPartie 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 coursLeçon 42. Utilisation des formulaires, partie 2
→
OriginalDans cette leçon, nous parlerons des champs de saisie de texte multiligne, des indicateurs, des boutons radio (ils sont également appelés «boutons radio») et des champs de liste. À ce jour, nous n'avons envisagé de travailler qu'avec des champs de saisie de texte ordinaires.
Voici le code du composant
App lequel nous allons commencer les expériences d'aujourd'hui:
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { firstName: "", lastName: "" } this.handleChange = this.handleChange.bind(this) } handleChange(event) { const {name, value} = event.target this.setState({ [name]: 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} /> { /** * : * * <textarea /> * <input type="checkbox" /> * <input type="radio" /> * <select> <option> */ } <h1>{this.state.firstName} {this.state.lastName}</h1> </form> ) } } export default App
Voici Ă quoi ressemble la page d'application dans le navigateur Ă ce stade du travail.
Page d'application dans le navigateurLes formulaires contiennent généralement non seulement des champs dans lesquels des lignes courtes sont entrées. Lorsque vous équipez des formulaires avec d'autres éléments, travailler avec eux dans React est un peu compliqué, bien qu'il n'y ait rien de spécial à ce sujet.
Dans le code ci-dessus, il y a un fragment commenté qui répertorie les éléments dont nous allons parler. Commençons par le champ de saisie de texte sur plusieurs lignes - l'élément
textarea . Il est probablement plus facile de comprendre comment travailler avec lui. Si vous utilisiez cet élément lors de la création de formulaires HTML normaux, vous savez que ce n'est pas une balise à fermeture automatique, comme ce fut le cas avec l'élément d'
input . Il a des parties d'ouverture et de fermeture.
Ajoutez cet élément au formulaire en insérant, immédiatement après le commentaire, le code suivant:
<br /> <textarea></textarea>
Si vous regardez maintenant la page de l'application, vous pouvez voir comment un champ de saisie de texte sur plusieurs lignes y est apparu.
Champ de saisie de texte sur la pageComme vous pouvez le voir, ce champ est légèrement supérieur aux champs ordinaires, l'utilisateur peut modifier sa taille à l'aide du marqueur en bas à droite. Grâce aux
cols rows et
cols vous pouvez spécifier ses dimensions lors de la description de cet élément. En HTML normal, si vous voulez avoir du texte après l'affichage du champ, cela se fait en entrant le texte souhaité entre les balises d'ouverture et de fermeture de l'élément. Dans React, travailler avec de tels éléments est rendu aussi similaire que possible à travailler avec
input éléments d'
input , dont nous avons parlé la dernière fois. À savoir, dans React, la balise
textarea se ferme automatiquement. Autrement dit, le code pour afficher le champ sur la page peut être modifié comme suit:
<textarea />
De plus, vous pouvez utiliser l'attribut
value dans cette balise, le travail avec celui-ci s'effectue exactement de la même manière qu'avec le même attribut des champs de texte ordinaires. De ce fait, l'uniformité est obtenue en travaillant avec différents éléments et, en outre, il est plus facile de mettre à jour le contenu des champs en mettant à jour les propriétés d'état associées à ces champs. Apportons l'état du code de champ à ce formulaire:
<textarea value={"Some default value"}/>
Cela entraînera le texte spécifié à apparaître dans le champ lorsqu'il est affiché sur la page.
Le texte qui apparaît dans le champNous reviendrons travailler avec le champ de saisie de texte sur plusieurs lignes, mais pour l'instant, nous parlerons de drapeaux. Une case à cocher est un contrôle d'
input dont le type est
checkbox . Voici sa description:
<input type="checkbox" />
Voici à quoi ressemble l'indicateur décrit par ce balisage sur la page.
Case à cocherLa principale caractéristique de ce contrôle est le fait que l'attribut
value n'est pas utilisé lorsque vous travaillez avec lui. Il est utilisé afin de fournir à l'utilisateur un choix de deux options, dont l'une correspond à la case à cocher et l'autre à la case non cochée. Pour suivre si la case est cochée ou décochée, l'attribut
checked est utilisé, qui est décrit par une valeur logique. Par conséquent, les indicateurs correspondent généralement aux propriétés logiques stockées dans l'état.
Apportons l'Ă©tat du composant Ă cette fiche:
this.state = { firstName: "", lastName: "", isFriendly: true }
Le code de description de l'indicateur est modifié comme suit:
<input type="checkbox" checked={this.state.isFriendly} />
Après cela, la case à cocher sélectionnée sera affichée sur la page.
Case cochéeCertes, il ne répondra plus aux clics sur lui. Le fait est que l'indicateur est lié à la variable correspondante stockée dans l'état, par conséquent, lorsque nous essayons, dans notre cas, de le supprimer, React, vérifiant l'état et constatant que la propriété
isFriendly définie sur
true , cela ne le permet pas. Dans le même temps, un avertissement sera affiché dans la console indiquant que nous n'avons pas fourni de mécanisme pour changer le champ (
onChange événement
onChange ) et qu'il était affiché en lecture seule.
Avertissement de la consoleNous pouvons bien écrire une méthode spéciale pour travailler avec le drapeau, mais le code de notre composant a déjà la méthode
handleChange() . Maintenant, il est utilisé pour travailler avec des champs de texte. Nous allons réfléchir à la façon de l'utiliser pour travailler avec le drapeau. Pour ce faire, affectez d'abord la méthode ci-dessus en tant que
onChange événement
onChange indicateur et attribuez à l'indicateur un nom qui correspond au nom de la propriété d'état associée à l'indicateur. De plus, nous signerons le drapeau en utilisant la balise
label :
<label> <input type="checkbox" name="isFriendly" checked={this.state.isFriendly} onChange={this.handleChange} /> Is friendly? </label>
Dans la méthode
handleChange() , dont le code est illustré ci-dessous, lorsque nous travaillons avec des champs de texte, nous avons découvert le nom de l'élément (
name ) et son contenu (
value ), après quoi nous avons mis à jour l'état en lui écrivant ce que le champ avec un certain nom dans son attribut
value :
handleChange(event) { const {name, value} = event.target this.setState({ [name]: value }) }
Maintenant, nous devons comprendre comment gérer un indicateur qui n'a pas d'attribut
value . Il n'a que l'attribut
checked , qui ne peut accepter que
false valeurs
true ou
false . Par conséquent, afin d'utiliser la méthode
handleChange() pour travailler avec un indicateur, nous devons vérifier si l'élément pour lequel ce gestionnaire est appelé est un indicateur. Afin d'effectuer cette vérification, nous rappelons que le type (
type ) de l'élément d'
input représentant le drapeau est défini sur
checkbox Ă
checkbox . Pour vérifier cette valeur, vous pouvez vous référer à la propriété
type de l'élément
event.target . Nous allons extraire cette propriété de
event.target , ainsi que la propriété
checked , en utilisant la construction suivante:
const {name, value, type, checked} = event.target
Nous pouvons maintenant vérifier la valeur de la constante de
type et savoir si l'élément pour lequel le gestionnaire d'événements est appelé est un indicateur. Si tel est le cas, nous écrirons dans l'état ce qui s'est avéré être dans la constante
checked . N'oubliez pas de sauvegarder le code chargé de travailler avec les champs de texte. Par conséquent, le code
handleChange() prend la forme suivante:
handleChange(event) { const {name, value, type, checked} = event.target type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) }
Après cela, vérifiez le fonctionnement du drapeau.
Vérification du fonctionnement du drapeauComme vous pouvez le voir, il peut maintenant être supprimé et installé. Dans le même temps, le travail des champs de texte n'est pas interrompu. Une notification concernant la case à cocher a disparu de la console, mais une notification y est affichée concernant le champ de saisie de texte multiligne. Modifiez le code qui décrit ce champ comme suit:
<textarea value={"Some default value"} onChange={this.handleChange} />
Cela entraînera la disparition de la notification, bien que nous n'ayons pas implémenté d'autres mécanismes pour travailler avec ce champ à l'aide des outils du composant (n'a pas spécifié de nom pour le champ, n'a pas ajouté la propriété correspondante à l'état). Vous pouvez implémenter ces fonctionnalités vous-même. Parlons maintenant des commutateurs.
Ils peuvent être représentés comme une combinaison d'éléments d'
input des types
text et
checkbox . Ce qui signifie ici que les commutateurs ont Ă la fois un attribut de
value et un attribut
checked . Ajoutez quelques commutateurs à notre formulaire, en créant leur code basé sur le code de description d'indicateur. Voici à quoi ça ressemble:
<label> <input type="radio" name="gender" value="male" checked={this.state.isFriendly} onChange={this.handleChange} /> Male </label> <br /> <label> <input type="radio" name="gender" value="female" checked={this.state.isFriendly} onChange={this.handleChange} /> Female </label>
Nous avons créé ce code sur la base du code de description de l'indicateur et n'avons toujours pas modifié quelque chose. Par conséquent, les commutateurs se comportent étrangement. En particulier, si la case n'est pas cochée, alors les deux commutateurs sont dans l'état "off", et si vous cochez la case, l'un d'eux s'avère être "on". De telles erreurs peuvent être évitées en traitant soigneusement le code de l'élément s'il est créé sur la base du code des éléments existants. Maintenant, nous allons le réparer.
Veuillez noter que ces deux éléments ont le même nom -
gender . Les commutateurs portant le même nom forment un groupe. Un seul commutateur inclus dans un tel groupe peut être sélectionné.
Lors de la configuration des commutateurs, vous ne pouvez pas simplement indiquer que leur valeur
checked est définie, par exemple, sur
true si une propriété d'état est
true . Les commutateurs doivent prendre en charge les changements synchronisés, au sein du groupe, dans leur propre état. Au lieu de cela, la valeur
checked des commutateurs est définie par condition. Dans notre cas, cette condition sera représentée en comparant la propriété d'état de
this.state.gender avec la chaîne
male ou
female . Dans le code de description du commutateur, il ressemble Ă ceci:
<label> <input type="radio" name="gender" value="male" checked={this.state.gender === "male"} onChange={this.handleChange} /> Male </label> <br /> <label> <input type="radio" name="gender" value="female" checked={this.state.gender === "female"} onChange={this.handleChange} /> Female </label>
Ajoutez maintenant une nouvelle propriété,
gender , à l'état, en l'initialisant avec une chaîne vide:
this.state = { firstName: "", lastName: "", isFriendly: false, gender: "" }
Après cela, les commutateurs fonctionneront indépendamment de la case à cocher. Ajoutez à la sortie de code du composant un en-tête de deuxième niveau qui affiche des informations sur le commutateur sélectionné:
<h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2>
Ici, probablement, il vaut la peine d'introduire un mécanisme de rendu conditionnel. Cela permettra, lors de l'ouverture de la page, lorsqu'aucun des boutons radio n'est sélectionné, de s'assurer que le texte
You are a ne s'y affiche pas, mais nous ne le ferons pas, bien que vous puissiez l'implémenter complètement vous-même. Voyons maintenant ce que nous avons obtenu.
Commutateurs sur la page d'applicationTout ce dont nous avons parlé ici peut sembler assez compliqué. Cela concerne en particulier la mémorisation des caractéristiques des différents contrôles. Afin de simplifier le travail avec les formulaires, vous pouvez utiliser des bibliothèques spécialisées. Par exemple, la bibliothèque
formik . Cette bibliothèque simplifie considérablement le processus de développement de formulaires dans les applications React.
Parlons maintenant des champs de liste.
En HTML normal, les constructions suivantes sont utilisées pour décrire les zones de liste déroulante:
<select> <option></option> <option></option> <option></option> <select/>
React adopte une approche similaire, bien que, comme pour les autres éléments, l'attribut
value soit utilisé. Cela permet de savoir facilement quel élément de liste est sélectionné et, en outre, il est plus facile de travailler avec l'état du composant.
Supposons que nous voulons créer une zone de liste déroulante qui permet à l'utilisateur de sélectionner sa couleur préférée. Pour ce faire, vous pouvez placer la construction suivante dans l'attribut
value de l'élément
select :
value={this.state.favColor} . Cela obtiendra les valeurs que l'utilisateur sélectionne. Ajoutez maintenant
favColor Ă l'Ă©tat:
this.state = { firstName: "", lastName: "", isFriendly: false, gender: "", favColor: "blue" }
Ensuite, nous équipons la zone de liste déroulante du
onChange événements
onChange et lui donnons un nom. Nous attribuons également des valeurs aux éléments d'
options de la zone de liste déroulante et saisissons le texte qui sera affiché dans la zone.
Voici à quoi ressemble un élément de
select signature
select avec une signature:
<label>Favorite Color:</label> <select value={this.state.favColor} onChange={this.handleChange} name="favColor" > <option value="blue">Blue</option> <option value="green">Green</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> </select>
Ajoutez maintenant une autre inscription au formulaire qui affiche la couleur préférée de l'utilisateur:
<h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2>
Il est temps d'essayer la zone de liste déroulante.
Boîte combinéeComme vous pouvez le voir, bien que notre forme ne brille pas avec la sophistication du design, les contrôles placés dessus fonctionnent comme prévu.
Grâce à l'organisation des contrôles React dans React, il est facile d'utiliser le même gestionnaire pour gérer leurs événements. C'est exactement le schéma de travail utilisé dans notre cas. La seule fonctionnalité de notre gestionnaire
handleChange() est que nous devons gérer les événements d'indicateur d'une manière spéciale.
Parlons maintenant de la soumission du formulaire ou du traitement des valeurs saisies une fois son achèvement terminé. Il existe deux approches pour effectuer de telles actions. Lorsque vous utilisez l'un d'entre eux, le formulaire doit être équipé d'un bouton:
<button>Submit</button>
En HTML5, si un élément
button est trouvé dans le formulaire, il agira comme un ancien élément d'
input de type
submit . Si vous cliquez sur ce bouton, un événement du formulaire
onSubmit lui-même sera déclenché. Si vous devez faire quelque chose après avoir rempli le formulaire, vous pouvez ajouter le
onClick événements
onClick au bouton, mais, par exemple, je préfère personnellement gérer ces événements au niveau du formulaire en lui affectant le
onSubmit événements
onSubmit :
<form onSubmit={this.handleSubmit}>
La méthode utilisée comme gestionnaire de cet événement n'a pas encore été écrite. Il s'agit d'un gestionnaire d'événements régulier qui, par exemple, se référant à une certaine API, lui transmet des données de formulaire.
Résumé
Dans cette leçon, nous concluons notre exposé sur l'utilisation des formulaires dans React. La prochaine fois, vous trouverez des travaux pratiques sur ce sujet.
Chers lecteurs! Si vous avez essayé d'utiliser la bibliothèque formik pour créer des formulaires dans React, veuillez nous en parler.
