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 indiqué ci-dessous.
<form onSubmit={handleSubmit}>
<label htmlFor="fileInput">Choose a file:</label>
<input
type="file"
id="fileInput"
onChange={handleFileChange}
ref={fileRef}
/>
<button type="submit">Upload</button>
</form>
React définit l’élément courant 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 assignant null.
fileRef.current.value = null
Encapsulez ceci dans une fonction nommée handleReset comme ceci :
const handleReset = () => {
fileRef.current.value = null;
};
Appelez ensuite cette fonction lorsque vous réussissez à télécharger un fichier pour effacer le champ de saisie.
Pourquoi réinitialiser les champs de saisie après le téléchargement d’un fichier ?
C’est généralement une bonne pratique que de réinitialiser le champ de saisie après un téléchargement de fichier réussi. En effet, cela indique clairement à l’utilisateur que son téléchargement a réussi et lui donne la possibilité de télécharger un autre fichier sans avoir à effacer manuellement le champ de saisie.