Comment travailler avec des éléments de formulaire dans React
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:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName(event.target.value)
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
Ci-dessus, nous avons un état firstName , un événement onInput et un gestionnaire handleChange . La fonction handleChange s’exécute à chaque frappe pour mettre à jour l’ état firstName .
Cette approche peut être idéale lorsque vous travaillez avec un champ d’entrée, mais la création de différents états et fonctions de gestionnaire pour chaque élément d’entrée deviendrait répétitive lorsque vous travaillez avec plusieurs champs d’entrée.
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 les champs de saisie.
Par exemple:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
Le formData 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 écouteur d’événement onInput à l’élément d’entrée, puis appelez votre fonction de gestionnaire créée.
Par exemple:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
Le bloc de code ci-dessus utilisait un événement onInput et une fonction de gestionnaire, handleFirstNameChange . Cette fonction handleFirstNameChange 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 souhaitez 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 :
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
value={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
L’ élément textarea 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, l’ élément de balise textarea détermine sa valeur par ses enfants, comme indiqué dans le bloc de code ci-dessous :
<textarea>
Hello, How are you?
</textarea>
Avec React, pour utiliser l’ élément textarea , vous pouvez créer un élément input avec le type textarea .
Ainsi:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Une alternative à l’utilisation de textarea comme type d’entrée consiste à utiliser la balise d’élément textarea à la place de la balise de type d’entrée, comme indiqué ci-dessous :
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
La balise textarea a un attribut value qui contient les informations de l’utilisateur saisies dans l’ élément textarea . Cela le fait fonctionner comme un élément d’entrée React par défaut.
Travailler avec l’élément d’entrée de case à cocher de React
Les choses sont un peu différentes lorsque vous travaillez avec des entrées de case à cocher . Le champ de saisie de la case à cocher de type n’a pas d’attribut de valeur. Cependant, il a un attribut coché . Cet attribut coché diffère d’un attribut de valeur en exigeant une valeur booléenne pour déterminer si la case est cochée ou décochée.
Par exemple:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
L’élément label fait référence à l’ID de l’élément d’entrée à l’aide de l’ attribut htmlFor . Cet attribut htmlFor prend l’ID de l’élément d’entrée, dans ce cas, la jointure. Lors de la création d’un formulaire HTML, l’ attribut htmlFor représente l’ attribut for .
La case à cocher est mieux utilisée 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 l’ élément d’entrée de la case à cocher : une propriété cochée et un événement onChange avec une fonction de gestionnaire qui déterminera la valeur de l’état à l’aide de la fonction setIsChecked() .
Par exemple:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked((prevState) =>! prevState)
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Ce bloc de code génère un état isChecked et définit sa valeur initiale sur false . Il définit la valeur de isChecked sur l’ attribut coché dans l’élément d’entrée. La fonction handleChange se déclenchera et changera la valeur d’état de isChecked en son contraire chaque fois que vous cliquerez 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 :
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData((prevState) => {
return {
...prevState,
[name]: type === checkbox? checked: value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Notez que dans la fonction handleChange , setFormData utilise un opérateur ternaire pour affecter la valeur de la propriété cochée aux propriétés d’état si le type d’entrée cible est une case à cocher . Sinon, il affecte les valeurs de l’ attribut value .
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.
Laisser un commentaire