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 pouvez trouver qu’il est plus difficile de réinitialiser certains champs de saisie que d’autres. En particulier, les entrées de fichiers peuvent être problématiques, alors que ce sont précisément les champs que vous voudrez réinitialiser après un téléchargement de fichier réussi.

Heureusement, le crochet useRef offre une solution simple. Découvrez comment vous pouvez effacer un champ de saisie de fichier avec le hook 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 en utilisant le hook useState pour suivre le fichier sélectionné. L’état initial de selectedFile sera null puisque l’utilisateur n’a pas encore sélectionné de fichier.

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

 import { useState } from "react";
function FileUploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };
  const handleSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="fileInput">Choose a file:</label>
        <input type="file" id="fileInput" onChange={handleFileChange} />
        <button type="submit">Upload</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 pourriez effacer la saisie en définissant l’état sur une chaîne vide :

 setSelectedFile("")
 

Mais cela ne fonctionnera pas avec un champ de saisie de type fichier. Définir la variable d’état selectedField à une chaîne vide supprime uniquement les données du fichier de l’état et non du DOM. Ceci est dû au fait 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 du fichier en utilisant le hook useRef. Dans cet exemple, importez useRef de React et créez un objet ref appelé fileRef :

 import { useState, useRef } from "react";
function FileUploadForm() {
  
  const fileRef = useRef()
  return (
    
  );
}
 

Faites ensuite référence à cet objet dans le champ de saisie, comme…