Gestion des formulaires / Blogs / Perficient

Dans mon précédent Blog, nous avions discuté de l’utilisation des actions du serveur avec nos formulaires et de la gestion de l’état de chargement avec le nouveau hook useFormStatus de React-dom. Dans celui-ci, nous allons explorer un autre crochet expérimental de React-Dom : utiliserFormState.

En bref, useFormState est un hook auquel nous fournissons une fonction pour manipuler les données du formulaire. La fonction nous fournit deux valeurs, la première étant la valeur des données du formulaire ou les données manipulées que nous obtenons de notre fonction fournie. Comme nous le savons, lors du développement d’applications NextJS, nous préférons avoir notre code côté serveur. Ce hook est bénéfique puisque la fonction que nous lui fournirons sera une fonction serveur. Nous en reparlerons plus tard.

Utiliser useFormState dans votre code

Comme je l’ai mentionné plus tôt, il s’agit d’un hook expérimental de React-Dom, ce qui signifie qu’il ne sera pas disponible avec notre version habituelle. installation npm commande d’installation du package. Pour cela, nous devrons exécuter l’instruction de commande dans notre terminal destinée à installer la version expérimentale de réagir et réagir-dom :

npm install react@experimental react-dom@experimental

Après l’installation des packages expérimentaux, votre package.json doit avoir les dépendances suivantes :

Une fois cette opération terminée, un fichier doit également être créé pour informer votre projet que les utilitaires expérimentaux seront utilisés si TypeScript est utilisé dans votre projet :

Après cela, vous devriez pouvoir importer useFormState dans vos fichiers et les utiliser en conséquence. //@ts-ignore » devra peut-être être ajouté juste au-dessus de l’importation car TypeScript ne reconnaîtra pas cette importation expérimentale, mais elle fonctionnera toujours comme prévu.

//@ts-ignore
import { useFormState } from "react-dom";

Créer un formulaire simple

Créons un formulaire simple qui accepte un nom et un âge.

<form action={onSubmit} className="form-control py-3 border-primary border-3">
<Input inputName="username" placeholder="Enter Name" />
    <Input inputName="age" placeholder="Enter Age" />
<SaveButton />
</form>

Nous utiliserons la propriété « name » de la balise d’entrée HTML, qui reçoit une valeur ici dans notre composant Input par la propriété « inputName », pour sélectionner les données des entrées du formulaire.

const Input = ({
  inputName,
  placeholder
}: {
  inputName: string;
  placeholder: string;
}) => {
  return (
    <div className="my-2">
      <input
        className="form-control"
        name={inputName}
        type="text"
        placeholder={placeholder}
      />
    </div>
  );
};

Voici le résultat de notre formulaire de base :

Quant au bouton de soumission, c’est ici que nous utiliserons un aspect de useFormStatus, un autre hook expérimental que j’ai mentionné plus tôt, à savoir l’état de chargement. Il s’agit d’une valeur booléenne appelée « en attente », que nous obtenons de ce hook. Nous pouvons l’utiliser pour désactiver le bouton de soumission afin d’éviter plusieurs appels de soumission de formulaire ou pour modifier le texte sur le bouton comme nous l’avons fait ici :

//@ts-ignore
import { useFormStatus } from "react-dom";

const SaveButton = () => {
  const { pending: isLoading } = useFormStatus();
  return (
    <div className="my-3">
      <button
        disabled={isLoading}
        className="btn btn-warning form-control"
        type="submit"
      >
        {isLoading ? "Saving..." : "Save"}
      </button>
    </div>
  );
};

Plus à ce sujet dans mon précédent Blog poster sur ce crochet.

Quant à notre formulaire, nous utiliserons l’attribut action du formulaire pour notre action de soumission. Mais d’abord, examinons l’action que nous créons dans le but de soumettre un formulaire.

const [{ username, age, error }, updateProfile] = useFormState(
    saveProfile,
    {
      username: "",
      age: "",
      error: {},
    }
  );

Comme le montre l’extrait de code ci-dessus, useFormState prend deux valeurs. Le premier est l’action que nous souhaitons effectuer lors de la soumission du formulaire, et le second concerne les valeurs d’état initiales du formulaire. Il renvoie ensuite deux valeurs sous forme de tableau, comme on le voit avec le hook useState de React. Lorsque nous exécutons notre action de soumission, nous recevons la valeur mise à jour comme première valeur, et la deuxième valeur est une fonction qui reflète notre fonction créée, la fonction « saveProfile ». Nous utiliserons cette nouvelle fonction, « updateProfile », pour la soumission de notre formulaire. Lorsque le formulaire sera soumis, nous obtiendrons à nouveau les valeurs mises à jour dans la première valeur du tableau renvoyé, que j’ai déconstruit ici pour plus de commodité.

Action de soumission du formulaire

Jetons maintenant un coup d’œil à l’action du serveur que nous avons transmise à notre nouveau hook expérimental :

"use server";

import { Profile} from "./types";

export const saveProfile: (_prevState: Profile, profile: Profile) => void = (
  _prevSate,
  profile
) => profile;

Comme nous pouvons le constater depuis le haut de ce fichier, le fichier est un fichier serveur et, par conséquent, il exécutera son action côté serveur plutôt que côté client. C’est essentiellement la raison principale du recours à ce procédé. Maintenant, si nous regardons notre fonction, elle accepte deux paramètres, mais nous ne devrions transmettre qu’une seule valeur de paramètre, qui serait nos données de formulaire. Alors d’où vient ce paramètre supplémentaire ? Cela est en fait dû au hook useFormState.

Plus tôt, j’ai déclaré que nous transmettions une fonction au hook useFormState et, en retour, recevions une valeur et une fonction qui ressemble à une copie de la fonction passée au hook. Le paramètre supplémentaire provient donc en fait de la nouvelle fonction « updateProfile » que nous avons extraite du hook. Et comme le montre le nom du premier paramètre, il s’agit du paramètre supplémentaire qui contient les données d’état précédentes de notre formulaire, puisque nous n’en avons pas besoin, j’ai ajouté un trait de soulignement à son nom pour le désigner comme variable inutilisée.

Utilisons ceci avec notre formulaire

Pour ce faire, il nous suffit de transmettre la nouvelle fonction obtenue du hook useFormState à la propriété action du formulaire. En passant FormData du formulaire avec les détails du formulaire à notre fonction, nous pouvons récupérer les données à l’aide de la fonction get de FormData.

const username = (formData.get("username") as string) || "";
  const age = (formData.get("age") as string) || "";

Ajoutons un peu de validation à notre fonction de soumission de formulaire :

export const saveProfile: (_prevState: Profile, formData: FormData) => Profile = (
  _prevSate,
  formData
) => {
  const username = (formData.get("username") as string) || "";
  const age = (formData.get("age") as string) || "";
  const invalidName = username.length && username.length < 4;
  const invalidAge = age.length && parseInt(age) < 18;
  let error: ProfileError = {};
  if (!username) error.username = "Name cannot be empty";
  if (!age) error.age = "Age cannot be empty";
  if (invalidName) error.username = "Username must be at least 4 characters";
  if (invalidAge) error.age = "Age must be above 18 years";
  if (username && !invalidName) error.username = "";
  if (age && !invalidAge) error.age = "";

  return ({ username, age, error });
};

En règle générale, lorsqu’un utilisateur saisit des valeurs dans les champs de saisie du formulaire et clique sur le bouton de soumission, nous nous attendons à ce que l’action de soumission soit côté client car ces actions sont effectuées sur l’appareil client. Mais avec useFormState, nous avons réussi à déplacer cette logique côté serveur en tant qu’action serveur. Nous pouvons ajouter des validations plus complexes que ce que nous voyons ci-dessus en utilisant l’expression régulière ou l’API de service pour plus de contrôles si nécessaire.

Ajout de ces messages d’erreur à notre formulaire avec leurs champs de saisie respectifs :

<form action={updateProfile} className="form-control py-3 border-primary border-3">
        <Input inputName="username" placeholder="Enter Name" />
        <div className="text-danger fs-6">{error.username}</div>
        <Input inputName="age" placeholder="Enter Age" />
        <div className="text-danger fs-6">{error.age}</div>
        <SaveButton />
      </form>

Voyons le résultat de notre formulaire avec la validation d’erreur :

Soumission d’un formulaire vide :

Entrée de nom d’utilisateur invalide :

Entrée d’âge invalide :

Soumission réussie du formulaire :

Conclusion

En conclusion, la maîtrise du hook useFormState dans React permet une gestion efficace des formulaires, offrant un accès facile aux données du formulaire et un suivi dynamique de l’état. Expérimentez avec ses fonctionnalités pour améliorer vos compétences en matière de création de formulaires et offrir des expériences utilisateur transparentes.