Comment travaillez-vous avec les formulaires dans les…

Lorsqu'on travaille avec des formulaires dans une SPA, j'utilise des composants contrôlés ou non contrôlés.

Composants contrôlés : La valeur du champ du formulaire est stockée dans l'état du composant et mise à jour via setState.

// Exemple de composant contrôlé en React
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Envoyé:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nom:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Envoyer</button>
    </form>
  );
}

Avantages des composants contrôlés :

Plus facile à contrôler et valider la saisie.
Plus simple à implémenter une logique conditionnelle d'affichage des champs.
Facile à intégrer avec des bibliothèques de gestion d'état (Redux, Vuex).

Composants non contrôlés : La valeur du champ du formulaire est stockée directement dans l'élément DOM, accessible via ref.

// Exemple de composant non contrôlé en React
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Envoyé:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nom:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Envoyer</button>
    </form>
  );
}

Avantages des composants non contrôlés :

Plus simple pour des formulaires simples sans logique complexe.
Moins de code pour une implémentation de base.

Approches générales pour travailler avec des formulaires dans une SPA :

Validation :
- Côté client (JavaScript) pour un retour instantané.
- Côté serveur pour assurer l'intégrité des données.
- Utilisation de bibliothèques de validation (Yup, Zod, VeeValidate, Vuelidate).
Gestion de l'envoi :
- Empêcher le comportement par défaut (event.preventDefault()).
- Envoyer les données au serveur (Fetch API, Axios, XHR).
- Afficher le statut de l'envoi (chargement, succès, erreur).
Gestion de l'état :
- Utilisation de l'état local du composant.
- Utilisation de gestionnaires d'état (Redux, Vuex, Pinia) pour des formulaires complexes ou utilisés ailleurs.
Retour utilisateur :
- Indicateurs de chargement.
- Messages d'erreur de validation.
- Messages de succès/erreur d'envoi.
Accessibilité (A11y) :
- Utilisation d'éléments HTML sémantiques (<form>, <label>, <input>, <button>).
- Lien entre <label> et les champs de saisie correspondants (attribut for ou nesting).
- Utilisation d'attributs WAI-ARIA si nécessaire.
Performance :
- Debounce ou throttling des événements onChange pour les champs avec des changements fréquents.
- Optimisation du rendu lors du changement d'état du formulaire.
Tests :
- Tests unitaires pour la logique du formulaire et la validation.
- Tests d'intégration pour l'interaction du formulaire avec l'API.

Le choix entre composants contrôlés et non contrôlés dépend de la complexité du formulaire et des exigences en matière de gestion d'état et de validation. Pour la plupart des formulaires, en particulier les complexes, les composants contrôlés offrent plus de flexibilité et de contrôle.

Comment travaillez-vous avec les formulaires dans les applications monopage (SPA) ?