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

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-hook een eenvoudige oplossing. Leer hoe je een bestandsinvoerveld kunt leegmaken met de useRef hook na een succesvolle upload.

Een eenvoudig uploadformulier maken

Om te demonstreren hoe u een bestandsinvoerveld kunt resetten met useRef, zult u maak een eenvoudig Reageer formulier aan met een invoerveld dat een afbeelding accepteert.

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

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

importeren { useState } van"Reageer";
functieFileUploadForm() {
const [geselecteerdBestand, setGeselecteerdBestand] = useState(nul);
const handleFileChange = (evenement) => {
 setSelectedFile (event.target.files[0]);
 };
const handleSubmit = (evenement) => {
 evenement.preventDefault();
 };
opbrengst (
 <>


"bestandsinvoer">Kies een bestand:</label>
"bestand" identiteitsbewijs="bestandsinvoer" onChange={handleFileChange} />
"indienen">Uploaden</button>
 </form>
 </>
 );
}

Wanneer het uploaden van het bestand is voltooid, zou de toepassing het invoerveld moeten leegmaken, wat u hieronder zult leren.

Wis het invoerveld na een bestandsupload

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

stelGeselecteerdBestand("")

Maar dit werkt niet met een invoerveld van het type bestand. Als u de statusvariabele selectedField instelt op een lege tekenreeks, worden alleen de bestandsgegevens uit de status verwijderd en niet uit de DOM. Dit komt doordat 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. Importeer in dit voorbeeld useRef uit React en maak een ref-object met de naam fileRef:

importeren { useState, useRef } van"Reageer";
functieFileUploadForm() {
// ...
const bestandsRef = gebruikRef()
opbrengst (
// ...
 );
}

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

"bestandsinvoer">Kies een bestand:</label>
 type="bestand"
 identiteitsbewijs="bestandsinvoer"
 onChange={handleFileChange}
 ref={bestandRef}
 />
"indienen">Uploaden</button>
</form>

Reageren stelt de huidig eigenschap van de ref-variabele aan het DOM-element, wat betekent dat u de bestandswaarde als volgt kunt krijgen:

bestandRef.huidige.waarde

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

fileRef.huidige.waarde = nul

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

const handleReset = () => {
 fileRef.huidige.waarde = nul;
};

Roep deze functie dan aan wanneer u een bestand succesvol 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 hun upload succesvol was en ook biedt hen de mogelijkheid om nog een bestand te uploaden zonder de invoer handmatig te wissen veld.