Dans Next JS, les développeurs préfèrent que la plupart de leur code reste côté serveur. Cependant, il est assez délicat d’accomplir de telles prouesses lorsque l’on travaille avec des formulaires. Composants qui nécessitent des entrées de l’utilisateur et doivent donc être des composants clients pour effectuer des opérations utilisateur telles que des clics sur des boutons ou des entrées de texte.
Alors, embarquons ensemble dans ce voyage pour comprendre un crochet expérimental de réagir-dom: utilisezFormStatus. Ce hook nous fournit les détails du formulaire qu’il utilise, comme son état de chargement, les données contenues dans le formulaire au moment de la soumission, ainsi que sa méthode et son action.
Ajout de useFormStatus à votre projet
Comme je l’ai mentionné plus tôt, il s’agit d’un hook expérimental de React-Dom. Il ne sera pas disponible avec notre service habituel 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 :
Installation
npm install réagir@experimental réagir-dom@experimental
Après l’installation des packages expérimentaux, votre package.json doit avoir les dépendances suivantes :
Une fois cela fait, vous devez également créer un fichier pour indiquer à votre projet que vous utiliserez les utilitaires expérimentaux si vous utilisez TypeScript dans votre projet :
Après cela, vous devriez pouvoir importer useFormStatus dans vos fichiers et les utiliser en conséquence. Vous devrez peut-être ajouter « //@ts-ignore » 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 { useFormStatus } from "react-dom";
Créer un formulaire simple
Créons un formulaire simple avec des entrées de test de base et un bouton de soumission pour utiliser ce hook aux fins prévues.
<form action={onSubmit} className="form-control py-3 border-info">
<ProfileInput inputName="firstName" placeholder="First Name" />
<ProfileInput inputName="lastName" placeholder="Last Name" />
<SubmitProfile />
</form>
Ici, la propriété inputName du composant ProfileInput est importante, car nous donnerons cette valeur à la propriété name de l’entrée. Nous utiliserons ensuite cette propriété pour récupérer les valeurs que l’utilisateur saisira dans le formulaire.
const ProfileInput = ({
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, nous utiliserons un aspect de useFormStatus, qui est l’état de chargement. Nous obtenons une valeur booléenne appelée « en attente » de ce hook. Nous pouvons l’utiliser pour désactiver le bouton de soumission afin d’éviter plusieurs appels de soumission de formulaires ou pour modifier le texte sur le bouton comme nous l’avons fait ici :
//@ts-ignore
import { useFormStatus } from "react-dom";
const SubmitProfile = () => {
const { pending: isLoading } = useFormStatus();
return (
<div className="my-3">
<button
disabled={isLoading}
className="btn btn-warning form-control"
type="submit"
>
{isLoading ? "Loading..." : "Submit"}
</button>
</div>
);
};
Remarquez que nous ne transmettons aucune fonction onSubmit ou onClick au bouton ? En effet, bien qu’il s’agisse du bouton de soumission de notre formulaire, nous soumettons le formulaire via l’attribut action du composant de formulaire HTML. De cette façon, nous pouvons exécuter une action serveur lorsque nous soumettons notre formulaire, ce qui signifie que l’extrait de code qui s’exécute lors de la soumission du formulaire peut provenir du côté serveur, ce qui, comme je l’ai mentionné au début de cet article, est ce que nous souhaitons. notre projet Next JS.
Attribut d’action à notre formulaire
Laissez-moi vous montrer comment l’attribut action du formulaire nous aide dans ce domaine.
const InputForm = () => {
const [profileList, updateProfileList] = useFormState(updateProfiles, []);
const onSubmit = async (formData: FormData) => {
const newProfile = await submitProfileAction(formData);
updateProfileList(newProfile);
};
return (
<>
<form action={onSubmit} className="form-control py-3 border-info">
<ProfileInput inputName="firstName" placeholder="First Name" />
<ProfileInput inputName="lastName" placeholder="Last Name" />
<SubmitProfile />
</form>
</>
);
Dans l’extrait ci-dessus, nous transmettons une fonction à l’attribut action du formulaire, qui prend généralement un chemin de chaîne. Mais ici, nous pouvons voir que nous utilisons le même attribut pour exécuter une fonction avec un paramètre censé inclure les données du formulaire. Les fonctions de la fonction onSubmit sont les actions du serveur que nous souhaitons exécuter lorsque le formulaire est soumis, elles seront donc dans un fichier marqué « utiliser le serveur ».
"use server";
import { Profile } from "./types";
export const updateProfiles: (
oldProfiles: Profile[],
newProfile: Profile
) => void = (oldProfiles, newProfile) => [...oldProfiles, newProfile];
const createProfile = (profile: Profile) => {
return new Promise((resolve) => setTimeout(() => resolve(profile), 2000));
};
export const submitProfileAction = async (formData: FormData) => {
const firstName = formData.get("firstName") as string || '';
const lastName = formData.get("lastName") as string || '';
return await createProfile({ firstName, lastName });
};
Dans submitProfileAction, nous prenons les valeurs d’entrée de notre formulaire avec la propriété get dans formData (que nous avons obtenue lorsque nous avons transmis onSubmit à l’attribut action dans le formulaire). C’est pourquoi nous avons donné des valeurs aux attributs de nom dans nos entrées puisque nous utilisons les mêmes valeurs de cet attribut de nom pour sélectionner les données du formulaire souhaité.
C’est la partie fascinante et la raison pour laquelle nous utilisons notre composant de formulaire de cette manière au lieu de la fonction onSubmit traditionnelle transmise au bouton de soumission. La possibilité d’effectuer des actions sur le serveur tout en utilisant des formulaires est très avantageuse à exploiter lorsque vous travaillez sur des projets Next JS.
Ajoutons une sortie pour l’action du formulaire :
return (
<>
<form action={onSubmit} className="form-control py-3 border-info">
<ProfileInput inputName="firstName" placeholder="First Name" />
<ProfileInput inputName="lastName" placeholder="Last Name" />
<SubmitProfile />
</form>
{!!profileList.length && (
<ul className="bg-light border-success form-control border-3 my-3 p-4">
{profileList.map(({ firstName, lastName }: Profile) => (
<li key={crypto.randomUUID()}>{`${firstName} ${lastName}`}</li>
))}
</ul>
)}
</>
Cela devrait nous permettre de voir comment notre formulaire fonctionne avec les actions du serveur et un état de chargement fourni par useFormStatus.
Sortir
État de chargement après la soumission du formulaire
Résultat après soumission du formulaire
Conclusion
Le hook useFormStatus simplifie la gestion des formulaires dans les applications Next.js en éliminant la complexité associée à la gestion de l’état du formulaire. Cet outil permet aux développeurs de créer des formulaires plus maintenables et plus conviviaux. Rationaliser le processus de développement et améliorer l’expérience utilisateur dans les applications Next.js.
Source link