Techniques Formik avancées pour créer des formulaires dynamiques et évolutifs / Blogs / Perficient

Formik est un excellent outil pour gérer les formulaires dans React, simplifiant la gestion et la validation des états. Cependant, à mesure que les formulaires deviennent plus complexes, vous devrez peut-être vous plonger dans certaines techniques avancées. Dans cet article, nous expliquerons comment gérer les champs dynamiques, créer des validations personnalisées, intégrer des bibliothèques d’interface utilisateur tierces et optimiser les performances.

1. Ajout et suppression dynamique de champs

Parfois, le nombre de champs de formulaire dont vous avez besoin dépend de la saisie de l’utilisateur. Par exemple, un formulaire d’enquête peut permettre aux utilisateurs d’ajouter ou de supprimer des questions de manière dynamique.

Formik dispose d’un composant FieldArray qui facilite cela. Voici comment l’utiliser :

import { Formik, Form, Field, FieldArray } from "formik";
const DynamicForm = () => {
return (
<Formik
initialValues={{ questions: [""] }}
onSubmit={(values) => console.log(values)}>
{({ values }) => (
<Form>
<FieldArray name="questions">
{({ push, remove }) => (
<div>
{values.questions.map((_, index) => (
<div key={index}>
<Field
name={`questions[${index}]`}
placeholder="Enter question"
/>
<button type="button" onClick={() => remove(index)}>Remove</button>
</div>
))}
<button type="button" onClick={() => push("")}>Add Question</button>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
);
};
export default DynamicForm;

Dans cet exemple, les utilisateurs peuvent ajouter et supprimer des questions du formulaire. push ajoute une nouvelle question et Remove supprime une question existante.

2. Validation personnalisée

La validation intégrée de Formik est excellente, mais vous devrez parfois ajouter votre propre logique, comme vérifier si un nom d’utilisateur est disponible.

Voici un exemple de la façon de procéder :

const validateUsername = async (value) => {
let error;
if (!value) {
error="Username is required";
} else {
const isAvailable = await checkUsernameAvailability(value); // Assume an API call
if (!isAvailable) {
error="Username is already taken";
}
}
return error;
};

<Formik initialValues={{ username: '' }} onSubmit={(values) => console.log(values)} > 
<Form>
<label htmlFor="username">Username</label> 
<Field name="username" validate={validateUsername} />
<ErrorMessage name="username" component="div" />
<button type="submit">Submit</button> 
</Form>
</Formik>

Dans cet exemple, la fonction validateUsername vérifie si le nom d’utilisateur est pris et affiche un message d’erreur en conséquence.

3. Intégration avec des bibliothèques d’interface utilisateur tierces

Formik fonctionne bien avec des bibliothèques tierces comme Material-UI. Vous pouvez transmettre des composants personnalisés à Formik en utilisant l’accessoire as ou en utilisant la fonction de rendu.

Voici comment utiliser le composant TextField de Material-UI avec Formik :

import TextField from '@mui/material/TextField';

<Formik
initialValues={{ email: "" }}
onSubmit={(values) => console.log(values)}>
<Form>
<Field
name="email"
as={TextField}
label="Email"
variant="outlined"
fullWidth
/>
<button type="submit">Submit</button>
</Form>
</Formik>

Alternativement, vous pouvez utiliser la prop render pour encore plus de contrôle :

<Field name="email">
{({ field, meta }) => (
<TextField
{...field}
label="Email"
variant="outlined"
fullWidth
error={meta.touched && Boolean(meta.error)}
helperText={meta.touched && meta.error}
/>
)}
</Field>

Cela vous permet d’utiliser vos composants d’interface utilisateur préférés sans perdre les avantages de la gestion des formulaires de Formik.

4. Optimisation des performances

Lorsque vous travaillez avec des formulaires volumineux, les performances peuvent devenir un problème. Vous pouvez minimiser les rendus inutiles et rendre votre formulaire plus efficace en utilisant ces techniques :

Utilisez React.memo : cela empêche les composants de restituer inutilement.

const OptimizedField = React.memo(({ name, type }) => (
<Field name={name} type={type} />
));

Valider sur flou : vous pouvez réduire le nombre de contrôles de validation en validant uniquement lorsque l’utilisateur quitte un champ (événement de flou). Ceci est particulièrement utile dans les grands formulaires.

<Formik
initialValues={{ email: '' }}
validateOnChange={false}
validateOnBlur={true}
onSubmit={(values) => console.log(values)}
>
{/* Form Fields */}
</Formik>

## Pour des informations plus approfondiesconsultez le fonctionnaire [Formik Field Arrays documentation].

Conclusion

Grâce à ces techniques Formik avancées, vous pouvez créer des formulaires dynamiques et évolutifs avec une validation personnalisée et optimiser les performances dans des applications plus volumineuses. Essayez-les dans votre prochain projet et voyez à quel point la gestion des formulaires dans React peut être plus facile !