Comment créer des formulaires dynamiques en React

Questions courantes

Comment créer un formulaire dynamique en React ?

Un formulaire dynamique en React est un formulaire qui peut être modifié en fonction des interactions de l’utilisateur. Pour créer un formulaire dynamique en React, vous pouvez utiliser des bibliothèques telles que React Hook Form ou Final Form.

Quels sont les avantages de l’utilisation de formulaires dynamiques en React ?

Les formulaires dynamiques en React offrent plusieurs avantages, notamment la possibilité de valider les données en temps réel, de gérer les erreurs de manière efficace et d’améliorer l’expérience utilisateur.

Pourquoi utiliser React pour créer des formulaires dynamiques ?

React est un framework JavaScript populaire pour la création d’applications web, et il offre plusieurs avantages pour la création de formulaires dynamiques, notamment la possibilité de gérer les états et les propriétés de manière efficace.

Dans ce tutoriel, nous allons apprendre à construire des formulaires dynamiques dans React. En utilisant des formulaires dynamiques, nous pouvons ajouter des champs ou les supprimer en fonction de nos besoins.

Alors, commençons.

## Comment créer un formulaire en React

Commençons par créer un formulaire simple. La syntaxe est simple :

`importez ’./App.css’ ;

function App() { return (`

`) ; }

export default App ;` Voici à quoi il ressemblera :

Nous avons deux champs de saisie, qui sont le nom et l’âge. Mais ces champs sont statiques. Donc, nous allons les rendre dynamiques en utilisant [React States](https://reussirsaboutiqueenligne.fr/react/react-state-pour-les-debutants-absolus/).

Comment rendre les formulaires dynamiques en React

Créez un état appelé InputFields. Il aura un objet, avec les propriétés nomet âge.

const [inputFields, setInputFields] = useState([ {nom : '', âge : ''} ]) Maintenant, faisons correspondre nos champs de formulaire à partir de leur état inputFields.

`import { useState } de ‘react’ ; importez ’./App.css’ ;

function App() { const [inputFields, setInputFields] = useState([ {nom : ”, âge : ” } ]) return (`

{inputFields.map((input, index) => { return (

) })}

`) ; }

export default App ;` Maintenant, nous ne verrons qu’un seul ensemble de champs de saisie, car nous n’avons qu’un seul objet dans l’état inputFields. Si nous ajoutons d’autres objets, nous verrons plusieurs champs de saisie.

Comment ajouter les valeurs de l’état inputFields ?

Maintenant, ajoutons les valeurs de l’état inputFieldsaux champs de saisie.

`import { useState } de ‘react’ ; importez ’./App.css’ ;

function App() { const [inputFields, setInputFields] = useState([ {nom : ”, âge : ” } ]) return (`

{inputFields.map((input, index) => { return (

) })}

`) ; }

export default App ;` Les valeurs seront input.name et input.age

Ajoutons également un événement onChange qui s’exécutera lorsque nous taperons quelque chose dans les champs de saisie.

Créez une fonction appelée handleFormChange.

`const handleFormChange = () => {

}` Affectez cette fonction aux champs de saisie en tant qu’événement onChange.

handleFormChange(index, event)} /> handleFormChange(index, événement)} /> /> Cet événement onChange prend deux paramètres, indexet event. Index est l’indice du tableau et event est la donnée que nous saisissons dans le champ de saisie. Nous les transmettons à la fonction handleFormChange.

`const handleFormChange = (index, event) => {

}` Mais le problème est que si nous essayons de taper quelque chose dans les champs de saisie, nous ne pourrons pas le faire. Parce que nous n’avons pas défini les états dans l’état formFields. Donc, faisons-le.

const handleFormChange = (index, event) => { let data = [...inputFields] ; } Stockons l’état de nos champs de saisiedans une variable appelée dataen utilisant l’opérateur d’étalement (les trois points ... ).

Ensuite, nous allons cibler l’index de la variable data en utilisant le paramètre index, et le nom de la propriété, également.

const handleFormChange = (index, event) => { let data = [...inputFields] ; data[index][event.target.name] = event.target.value ; } Par exemple, supposons que nous tapions dans le champ de saisie avec l’index 0. Donc, nous spécifions l’index dans les données, et le nom de la propriété, en utilisant **event.target.name.**Et dans cet index de données, nous stockons les valeurs des champs de saisie en utilisant event.target.value.

Maintenant, nous devons stocker ces données à nouveau dans le tableau inputFieldsen utilisant la méthode setInputFields.

const handleFormChange = (index, event) => { let data = [...inputFields] ; data[index][event.target.name] = event.target.value ; setInputFields(data) ; } Maintenant, si nous tapons quelque chose dans les champs de saisie, cela s’affichera dans les champs de saisie.

Comment ajouter d’autres champs de formulaire

Créons un bouton pour ajouter d’autres champs de formulaire.

Ajouter plus.. Et une fonction, aussi, qui sera déclenchée lorsque ce bouton est cliqué.

`const addFields = () => {

}` Ajoutons la fonction au bouton via un événement onClick.

Ajouter plus.. Maintenant, dans la fonction addFields, nous devons créer un objet. Et chaque fois que nous cliquerons sur le bouton, il sera poussé vers l’état inputFields, créant ainsi un nouveau champ de saisie.

const addFields = () => { let newfield = {nom : '', age : '' } } Ensuite, définissez ce nouveau champ dans l’état inputFields.

`const addFields = () => { let newfield = { name : ”, age : ” }

setInputFields([...inputFields, newfield])

}` Ici, nous définissons également les champs d’entréeexistants à l’aide de l’opérateur d’étalement, conjointement avec le nouveau champ.

Si nous cliquons maintenant sur le bouton Add Field, un nouveau champ de saisie sera créé.

## Comment créer un bouton de soumission

Créons un bouton de soumission et une fonction pour voir nos données lorsque nous soumettons le formulaire.

Soumettre Nous avons également besoin d’une fonction qui sera déclenchée lorsque nous cliquerons sur ce bouton. Elle enregistrera les données dans la console, à partir des champs de saisie. Elle possède également une méthode appelée **e.preventDefault()**qui empêchera le rafraîchissement de la page.

const submit = (e) => { e.preventDefault() ; console.log(inputFields) } Ajoutez cette fonction au bouton Submit :

Submit Et aussi dans la balise du formulaire :

Si nous soumettons, nous verrons nos données dans la console :

## Comment supprimer les champs à l’aide d’un bouton de suppression

Créons maintenant un bouton pour supprimer ces champs si nous ne les voulons pas.

{inputFields.map((input, index) => { return ( handleFormChange(index, event)} /> handleFormChange(index, event)} /> – handleFormChange(index, event)} /> Supprimer ) })} Nous avons également besoin d’une fonction.

`const removeFields = () => {

}` Donc, attribuez cette fonction au bouton Supprimer.

removeFields(index)}>Supprimer Nous passons l’index comme paramètre, qui est l’index des champs de saisie.

Ensuite, recevez cet index dans la fonction.

`const removeFields = (index) => {

}` Et comme précédemment, nous devons créer une nouvelle variable et stocker l’état inputFieldsdans cette nouvelle variable.

const removeFields = (index) => { let data = [...inputFields] ; } Ensuite, nous devons diviser cette variable de données par l’index. Puis nous devons la stocker dans l’état inputFieldsen utilisant setInputFields.

const removeFields = (index) => { let data = [...inputFields] ; data.splice(index, 1) setInputFields(données) } Maintenant, si nous cliquons sur remove, cela supprimera ce champ de formulaire.

Nous avons donc cinq champs de saisie ici, avec cinq noms différents. Supprimons la saisie de Nishant.

Vous voyez qu’il a été supprimé. Et si nous soumettons, nous verrons nos données mises à jour dans la console.

## Conclusion

Maintenant vous savez comment créer des formulaires dynamiques dans React. Félicitations !

Bon apprentissage 🙂

FAQ

Comment ajouter des champs de formulaire en React ?

Pour ajouter des champs de formulaire en React, vous pouvez utiliser la bibliothèque React Hook Form. Vous pouvez créer des champs de formulaire en utilisant des éléments de formulaire tels que les champs de texte, les cases à cocher et les boutons de soumission.

Comment valider les données de formulaire en React ?

Pour valider les données de formulaire en React, vous pouvez utiliser des bibliothèques telles que Yup ou Joi. Ces bibliothèques offrent une manière simple et efficace de valider les données de formulaire en React.

Quels sont les avantages de l’utilisation de React Hook Form ?

React Hook Form offre plusieurs avantages, notamment la possibilité de gérer les formulaires de manière simple et efficace, la validation des données en temps réel et la gestion des erreurs de manière efficace.

Comment créer un bouton de soumission en React ?

Pour créer un bouton de soumission en React, vous pouvez utiliser l’élément de formulaire button et ajouter un événement onClick pour gérer la soumission du formulaire.

Comment supprimer des champs de formulaire en React ?

Pour supprimer des champs de formulaire en React, vous pouvez utiliser la bibliothèque React Hook Form et supprimer les champs de formulaire en utilisant la méthode remove.

À lire aussi sur le site

• XChat arrive sur iOS : découvrez toutes ses fonctionnalités et comment y accéder
• Instagram offre désormais la possibilité de corriger ses commentaires après leur publication
• Code Santé : comment l’association Crazy Esport révolutionne la prévention santé chez les gamers à travers le manga