Travailler avec des formulaires et des éléments de formulaire lors du développement avec React peut être complexe car les éléments de formulaire HTML se comportent quelque peu différemment dans React que les autres éléments DOM.
Apprenez à utiliser les formulaires et les éléments de formulaire tels que les cases à cocher, les zones de texte et les entrées de texte sur une seule ligne.
Gestion des champs de saisie dans les formulaires
Dans React, la gestion d'un champ de saisie dans un formulaire est souvent accomplie en créant un état et en le liant au champ de saisie.
Par exemple:
fonctionApplication() {const [firstName, setFirstName] = React.useState('');
fonctionhandleFirstNameChange(événement) {
setFirstName( événement.cible.valeur )
}
retour (
<former>
<type d'entrée='texte' espace réservé='Prénom' onInput={handleFirstNameChange} />
</form>
)
}
Ci-dessus, nous avons un prénom état, un onInput événement, et un handleChange gestionnaire. Le handleChange la fonction s'exécute à chaque frappe pour mettre à jour le prénom État.
Cette approche peut être idéale lorsque vous travaillez avec un champ de saisie, mais que vous créez différents états et les fonctions de gestionnaire pour chaque élément d'entrée deviendraient répétitives lorsque vous travaillez avec plusieurs entrées des champs.
Pour éviter d'écrire du code répétitif et redondant dans de telles situations, donnez à chaque champ de saisie un nom distinct, définissez un objet comme valeur d'état initiale de votre formulaire, puis remplissez l'objet avec des propriétés portant les mêmes noms que l'entrée des champs.
Par exemple:
fonctionApplication() {constante [formData, setFormData] = React.useState(
{
prénom: '',
nom de famille: ''
}
);
retour (
<former>
<type d'entrée='texte' espace réservé='Prénom' nom='prénom' />
<type d'entrée='texte' espace réservé='Nom de famille' nom='nom de famille' />
</form>
)
}
Le Données de formulaire servira de variable d'état pour gérer et mettre à jour tous les champs de saisie à l'intérieur du formulaire. Assurez-vous que les noms des propriétés dans l'objet d'état sont identiques aux noms des éléments d'entrée.
Pour mettre à jour l'état avec les données d'entrée, ajoutez un onInput écouteur d'événement à l'élément d'entrée, puis appelez votre fonction de gestionnaire créée.
Par exemple:
fonctionApplication() {constante [formData, setFormData] = React.useState(
{
prénom: '',
nom de famille: ''
}
);
fonctionhandleChange(événement) {
setFormData( (prevState) => {
retour {
...prevState,
[événement.cible.nom]: événement.cible.valeur
}
})
}
retour (
<former>
<saisir
taper='texte'
espace réservé='Prénom'
nom='prénom'
onInput={handleChange}
/>
<saisir
taper='texte'
espace réservé='Nom de famille'
nom='nom de famille'
onInput={handleChange}
/>
</form>
)
}
Le bloc de code ci-dessus utilisait un onInput événement et une fonction de gestionnaire, handleFirstNameChange. Ce handleFirstNameChange La fonction mettra à jour les propriétés d'état lorsqu'elle sera appelée. Les valeurs des propriétés d'état seront les mêmes que celles de leurs éléments d'entrée correspondants.
Conversion de vos entrées en composants contrôlés
Lorsqu'un formulaire HTML est soumis, son comportement par défaut consiste à accéder à une nouvelle page dans le navigateur. Ce comportement est gênant dans certaines situations, comme lorsque vous voulez valider les données saisies dans un formulaire. Dans la plupart des cas, vous trouverez plus approprié d'avoir une fonction JavaScript avec accès aux informations saisies dans le formulaire. Ceci peut être facilement réalisé dans React en utilisant des composants contrôlés.
Avec les fichiers index.html, les éléments de formulaire conservent une trace de leur état et le modifient en réponse à l'entrée d'un utilisateur. Avec React, la fonction set state modifie un état dynamique stocké dans la propriété state du composant. Vous pouvez combiner les deux états en faisant de l'état Réagir la seule source de vérité. De cette façon, le composant qui crée un formulaire contrôle ce qui se passe lorsqu'un utilisateur saisit des données. Les éléments de formulaire d'entrée avec des valeurs contrôlées par React sont appelés composants contrôlés ou entrées contrôlées.
Pour utiliser des entrées contrôlées dans votre application React, ajoutez un accessoire de valeur à votre élément d'entrée :
fonctionApplication() {constante [formData, setFormData] = React.useState(
{
prénom: '',
nom de famille: ''
}
);
fonctionhandleChange(événement) {
setFormData( (prevState) => {
retour {
...prevState,
[événement.cible.nom]: événement.cible.valeur
}
})
}
retour (
<former>
<saisir
taper='texte'
espace réservé='Prénom'
nom='prénom'
onInput={handleChange}
valeur={formData.firstName}
/>
<saisir
taper='texte'
espace réservé='Nom de famille'
nom='nom de famille'
onInput={handleChange}
valeur={formData.lastName}
/>
</form>
)
}
Les attributs de valeur des éléments d'entrée sont désormais définis comme étant la valeur des propriétés d'état correspondantes. La valeur de l'entrée est toujours déterminée par l'état lors de l'utilisation d'un composant contrôlé.
Manipulation de l'élément d'entrée Textarea
Le zone de texte L'élément est comme n'importe quel élément d'entrée normal mais contient des entrées multilignes. Il est utile lors de la transmission d'informations qui nécessitent plus d'une seule ligne.
Dans un fichier index.html, le balise de zone de texte L'élément détermine sa valeur par ses enfants, comme indiqué dans le bloc de code ci-dessous :
<zone de texte>
Bonjour comment allez-vous?
</textarea>
Avec React, pour utiliser le zone de texte élément, vous pouvez créer un élément d'entrée avec le type zone de texte.
Ainsi:
fonctionApplication() {retour (
<former>
<type d'entrée='zone de texte' nom='message'/>
</form>
)
}
Une alternative à l'utilisation zone de texte comme type d'entrée est d'utiliser le zone de texte balise d'élément à la place de la balise de type d'entrée, comme indiqué ci-dessous :
fonctionApplication() {retour (
<former>
<zone de texte
nom='message'
valeur='Bonjour comment allez-vous?'
/>
</form>
)
}
Le zone de texte tag a un attribut de valeur qui contient les informations de l'utilisateur saisies dans le zone de texte élément. Cela le fait fonctionner comme un élément d'entrée React par défaut.
Travailler avec l'élément d'entrée Checkbox de React
Les choses sont un peu différentes lorsque vous travaillez avec case à cocher contributions. Le champ de saisie du type case à cocher n'a pas d'attribut de valeur. Cependant, il a un vérifié attribut. Ce vérifié L'attribut diffère d'un attribut de valeur en exigeant une valeur booléenne pour déterminer si la case est cochée ou non.
Par exemple:
fonctionApplication() {retour (
<former>
<type d'entrée='case à cocher' identifiant='joindre' nom='rejoindre' />
<étiquette htmlFor='joindre'>Aimerez-vous rejoindre notre équipe?</label>
</form>
)
}
L'élément label fait référence à l'ID de l'élément d'entrée à l'aide de la htmlPour attribut. Ce htmlPour L'attribut prend l'ID de l'élément d'entrée — dans ce cas, joindre. Quand création d'un formulaire HTML, le htmlPour l'attribut représente le pour attribut.
Le case à cocher est mieux utilisé comme entrée contrôlée. Vous pouvez y parvenir en créant un état et en lui attribuant la valeur booléenne initiale true ou false.
Vous devez inclure deux accessoires sur le case à cocher élément d'entrée: un vérifié propriété et une sur le changement événement avec une fonction de gestionnaire qui déterminera la valeur de l'état à l'aide de la setIsChecked() fonction.
Par exemple:
fonctionApplication() {constante [isChecked, setIsChecked] = React.useState(FAUX);
fonctionhandleChange() {
setIsChecked( (prevState) => !prevState )
}
retour (
<former>
<saisir
taper='case à cocher'
identifiant='joindre'
nom='rejoindre'
vérifié={est vérifié}
onChange={handleChange}
/>
<étiquette htmlFor='joindre'>Aimerez-vous rejoindre notre équipe?</label>
</form>
)
}
Ce bloc de code génère un est vérifié état et définit sa valeur initiale sur FAUX. Il fixe la valeur de est vérifié au vérifié attribut dans l'élément d'entrée. Le handleChange fonction se déclenchera et changera la valeur d'état de est vérifié à son opposé chaque fois que vous cliquez sur la case à cocher.
Un élément de formulaire peut probablement contenir plusieurs éléments d'entrée de différents types, tels que des cases à cocher, du texte, etc.
Dans de tels cas, vous pouvez les gérer de la même manière que vous avez géré plusieurs éléments d'entrée du même type.
Voici un exemple :
fonctionApplication() {laisser[formData, setFormData] = React.useState(
{
prénom: ''
rejoindre: vrai,
}
);
fonctionhandleChange(événement) {
constante {nom, valeur, type, coché} = event.target ;
setFormData( (prevState) => {
retour {
...prevState,
[nom]: taper case à cocher? coché: valeur
}
})
}
retour (
<former>
<saisir
taper='texte'
espace réservé='Prénom'
nom='prénom'
onInput={handleChange}
valeur={formData.firstName}
/>
<saisir
taper='case à cocher'
identifiant='joindre'
nom='rejoindre'
vérifié={formData.join}
onChange={handleChange}
/>
<étiquette htmlFor='joindre'>Aimerez-vous rejoindre notre équipe?</label>
</form>
)
}
Notez que dans le handleChange fonction, setFormData utilise un opérateur ternaire pour attribuer la valeur de vérifié propriété aux propriétés d'état si le type d'entrée cible est un case à cocher. Sinon, il attribue les valeurs des valeur attribut.
Vous pouvez maintenant gérer les formulaires React
Vous avez appris à travailler avec des formulaires dans React en utilisant différents éléments d'entrée de formulaire ici. Vous avez également appris à appliquer des entrées contrôlées à vos éléments de formulaire en ajoutant un accessoire de valeur ou un accessoire coché lorsque vous travaillez avec des cases à cocher.
Une gestion efficace des éléments d'entrée du formulaire React améliorera les performances de votre application React, ce qui se traduira par une meilleure expérience utilisateur globale.
