Créer des formulaires dans React.js : un guide pour débutants-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

Aug 18, 2024 am 07:00 AM

Building Forms in React.js : A beginners guide

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 = () =&gt; {
 
 
  const [formData, setFormData] = useState({ name: '', email: '' });
 
  const handleChange = (e) =&gt; {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };
 
  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    console.log(formData);
  };
 
return (
  &lt;form onSubmit={handleSubmit}&gt;
    &lt;input type="text" name="name" value={formData.name}     onChange={handleChange} /&gt;
    &lt;input type="email" name="email" value={formData.email}     onChange={handleChange} /&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
)}
export default MyForm

Copier après la connexion

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

Copier après la connexion

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 = () =&gt; (
   &lt;div&gt; 
    &lt;h1&gt;Sign Up&lt;/h1&gt;
    &lt;Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}
 
 
  onSubmit={async (values) =&gt; {
    await new Promise((r) =&gt; setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
&gt;
  &lt;Form&gt;
    &lt;label htmlFor="firstName"&gt;First Name&lt;/label&gt;
    &lt;Field id="firstName" name="firstName" placeholder="Jane" /&gt;
 
 
    &lt;label htmlFor="lastName"&gt;Last Name&lt;/label&gt;
    &lt;Field id="lastName" name="lastName" placeholder="Doe" /&gt;
 
 
    &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
    &lt;Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  /&gt;
   &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/Form&gt;
 &lt;/Formik&gt;
&lt;/div&gt;
);
 
 
ReactDOM.render(&lt;BasicForm /&gt;, document.getElementById('root'));

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn