Créer des formulaires dans React.js : un guide pour débutants

Les formulaires font partie intégrante des applications Web, permettant l'interaction des utilisateurs et la collecte de données. Dans React.js, la création de formulaires implique l'utilisation de la gestion d'état et d'une architecture basée sur les composants pour garantir l'efficacité et la maintenabilité. Ce guide couvrira les meilleures pratiques pour créer des formulaires dans React.js, rendant votre application robuste et conviviale.
 

1. Utiliser des composants contrôlés

 
Les composants contrôlés sont le moyen préféré pour gérer les entrées de formulaire dans React. Ils conservent les données du formulaire dans l'état du composant, ce qui facilite leur gestion et leur validation.
 
Stockez toutes les valeurs d’entrée du formulaire dans un état. Créez un objet et mappez toutes les entrées avec leur propriété dans l'état, exemple ci-dessous

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name}     onChange={handleChange} />
    <input type="email" name="email" value={formData.email}     onChange={handleChange} />
    <button type="submit">Submit</button>
</form>
)}
export default MyForm

2. Gestion des erreurs

 
La gestion des erreurs et la validation constituent une partie importante d’un formulaire. Vous devez valider et vérifier les erreurs pour chaque valeur saisie par l'utilisateur et gérer tous les cas tels que :

• Obtenir null/indéfini
• Obtenir une valeur vide
• Type de données invalide, etc.

Doit mettre en œuvre la validation côté client pour améliorer l'expérience utilisateur et réduire la charge du serveur, ce qui améliore éventuellement les performances. Utilisez des bibliothèques comme Yup ou une logique de validation personnalisée pour garantir l'intégrité des données.

Voyons comment implémenter une logique de validation personnalisée

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name} onChange={handleChange} />
    {errors.name && <span>{errors.name}</span>}
    <input type="email" name="email" value={formData.email} onChange={handleChange} />
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">Submit</button>
</form>
);
};

 
Pour faciliter le travail, vous devez utiliser le package Yup pour valider en douceur les données du formulaire. C'est un package très populaire utilisé avec les bibliothèques de formulaires comme React-Hook-Form ou Formik.
Ouais Docs : https://www.npmjs.com/package/yup
 

3. Tirer parti des bibliothèques tierces

 
Des bibliothèques comme Formik et React Hook Form simplifient la gestion des formulaires, offrent des fonctionnalités puissantes prêtes à l'emploi et permettent aux développeurs de créer et de valider facilement des formulaires de manière plus évolutive et flexible

Utilisation de Formik :

Documents :- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

Cliquez pour consulter la démo Formik en direct

Conclusion

 
La création de formulaires dans React.js peut être simple et efficace en suivant ces bonnes pratiques. Utilisez des composants contrôlés pour la gestion de l'état, validez minutieusement les entrées, exploitez des bibliothèques tierces, améliorez l'UX avec un style approprié et optimisez les performances pour créer des formulaires réactifs et robustes.
En adhérant à ces directives, vous pouvez garantir que vos formulaires sont fiables, conviviaux et maintenables, offrant ainsi une expérience transparente aux utilisateurs et aux développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!