Comment le crochet useRef de React peut vous aider à réinitialiser un champ de saisie après un téléchargement réussi

En utilisant React, vous trouverez peut-être plus difficile de réinitialiser certains champs de saisie que d'autres. En particulier, les entrées de fichiers peuvent être problématiques, mais ce sont les champs exacts que vous voudrez réinitialiser après un téléchargement de fichier réussi.

Heureusement, le crochet useRef fournit une solution simple. Découvrez comment vous pouvez effacer un champ de saisie de fichier avec le crochet useRef après un téléchargement réussi.

Création d'un formulaire de téléchargement simple

Pour montrer comment réinitialiser un champ de saisie de fichier avec useRef, vous allez créer un formulaire React simple avec un champ de saisie qui accepte une image.

Tout d'abord, configurez une valeur d'état nommée selectedFile à l'aide du crochet useState pour suivre le fichier sélectionné. L'état initial de selectedFile sera nul puisque l'utilisateur n'a pas encore sélectionné de fichier.

Créez également une fonction de gestionnaire appelée handleFileChange qui met à jour l'état selectedFile lorsqu'un utilisateur sélectionne un fichier. Ajoutez une deuxième fonction appelée handleSubmit, qui devrait télécharger l'état lorsqu'un utilisateur télécharge le fichier.

importer { useState } depuis"réagir";
fonctionFichierTéléchargerFormulaire() {
constante [selectedFile, setSelectedFile] = useState(nul);
constante handleFileChange = (événement) => {
 setSelectedFile (event.target.files[0]);
 };
constante handleSubmit = (événement) => {
 event.preventDefault();
 };
retour (
 <>


"fichierEntrée">Choisissez un fichier :</label>
"déposer" identifiant="fichierEntrée" onChange={handleFileChange} />
"soumettre">Télécharger</button>
 </form>
 </>
 );
}

Lorsque le téléchargement du fichier est terminé, l'application doit effacer le champ de saisie, ce que vous apprendrez à faire ci-dessous.

Effacer le champ de saisie après un téléchargement de fichier

S'il s'agissait d'un champ de texte, vous pouvez effacer l'entrée en définissant l'état sur une chaîne vide :

setFichierSélectionné("")

Mais cela ne fonctionnera pas avec un champ de saisie de type déposer. La définition de la variable d'état selectedField sur une chaîne vide supprime uniquement les données du fichier de l'état et non du DOM. C'est parce que cet état ne fait pas référence à la valeur d'entrée.

Pour effacer la valeur d'entrée, vous devez créer une référence à l'entrée de fichier à l'aide du crochet useRef. Dans cet exemple, importez useRef depuis React et créez un objet ref appelé fileRef :

importer { useState, useRef } depuis"réagir";
fonctionFichierTéléchargerFormulaire() {
// ...
constante RéfFichier = useRef()
retour (
// ...
 );
}

Ensuite, référencez la référence dans le champ de saisie comme indiqué ci-dessous.

"fichierEntrée">Choisissez un fichier :</label>
 taper="déposer"
 identifiant="fichierEntrée"
 onChange={handleFileChange}
 ref={fileRef}
 />
"soumettre">Télécharger</button>
</form>

React définit le actuel propriété de la variable ref à l'élément DOM, ce qui signifie que vous pouvez obtenir la valeur du fichier comme ceci :

fileRef.current.value

Vous pouvez ensuite réinitialiser cette valeur en lui affectant null.

fileRef.current.value = nul

Encapsulez ceci dans une fonction nommée handleReset comme ceci :

constante handleReset = () => {
 fileRef.current.value = nul;
};

Appelez ensuite cette fonction lorsque vous téléchargez avec succès un fichier pour effacer le champ de saisie.

Pourquoi vous devriez réinitialiser les champs de saisie après les téléchargements de fichiers

Il est généralement recommandé de réinitialiser le champ de saisie après un téléchargement de fichier réussi. En effet, cela donne à l'utilisateur une indication claire que son téléchargement a réussi et aussi leur offre la possibilité de télécharger un autre fichier sans avoir à effacer manuellement l'entrée champ.