Zoeken op website

Hoe React's useRef Hook u kan helpen een invoerveld opnieuw in te stellen na een succesvolle upload

Formulieren die zichzelf opruimen, zorgen voor een betere gebruikerservaring. Ontdek hoe useRef een belangrijke speler kan zijn in dit deel van uw app.

Als u React gebruikt, vindt u het misschien lastiger om sommige invoervelden opnieuw in te stellen dan andere. Met name bestandsinvoer kan problematisch zijn, maar dit zijn precies de velden die u wilt resetten na een succesvolle bestandsupload.

Gelukkig biedt de useRef-haak een eenvoudige oplossing. Leer hoe u een bestandsinvoerveld kunt wissen met de useRef-hook na een succesvolle upload.

Een eenvoudig uploadformulier maken

Om te demonstreren hoe u een bestandsinvoerveld opnieuw kunt instellen met useRef, maakt u een eenvoudig React-formulier met een invoerveld dat een afbeelding accepteert.

Stel eerst een statuswaarde in met de naam SelectFile met behulp van de useState-hook om het geselecteerde bestand bij te houden. De initiële status voor selectFile is null, omdat de gebruiker nog geen bestand heeft geselecteerd.

Maak ook een handlerfunctie met de naam handleFileChange, die de status van het geselecteerde bestand bijwerkt wanneer een gebruiker een bestand selecteert. Voeg een tweede functie toe met de naam handleSubmit, die de status moet uploaden wanneer een gebruiker het bestand uploadt.

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>
    </>
  );
}

Wanneer het uploaden van het bestand is voltooid, moet de toepassing het invoerveld leegmaken. Hieronder leert u hoe u dat moet doen.

Wis het invoerveld na het uploaden van een bestand

Als dit een tekstveld was, zou u de invoer kunnen wissen door de status in te stellen op een lege string:

setSelectedFile("")

Maar dit werkt niet met een invoerveld van het type bestand. Als u de statusvariabele van het geselecteerde veld instelt op een lege tekenreeks, worden alleen de bestandsgegevens uit de status verwijderd en niet uit de DOM. Dit komt omdat deze status niet verwijst naar de invoerwaarde.

Om de invoerwaarde te wissen, moet u een verwijzing naar de bestandsinvoer maken met behulp van de useRef-hook. In dit voorbeeld importeert u useRef uit React en maakt u een ref-object met de naam fileRef:

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

Verwijs vervolgens naar de ref in het invoerveld, zoals hieronder weergegeven.

<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 stelt de huidige eigenschap van de ref-variabele in op het DOM-element, wat betekent dat je de bestandswaarde als volgt kunt krijgen:

fileRef.current.value

U kunt deze waarde vervolgens opnieuw instellen door er null aan toe te wijzen.

fileRef.current.value = null

Kapsel dit in een functie met de naam handleReset als volgt in:

const handleReset = () => {
    fileRef.current.value = null;
};

Roep deze functie vervolgens aan wanneer u succesvol een bestand heeft geüpload om het invoerveld leeg te maken.

Waarom u invoervelden opnieuw moet instellen na het uploaden van bestanden

Het is over het algemeen een goede gewoonte om het invoerveld opnieuw in te stellen na een succesvolle bestandsupload. Dit komt omdat het de gebruiker een duidelijke indicatie geeft dat zijn upload succesvol was en hem ook de mogelijkheid biedt om nog een bestand te uploaden zonder het invoerveld handmatig te hoeven leegmaken.

Gerelateerde artikelen: