Hvordan Reacts useRef Hook kan hjælpe dig med at nulstille et inputfelt efter en vellykket upload

Ved at bruge React kan du finde det mere akavet at nulstille nogle inputfelter end andre. Især filinput kan være problematisk, men disse er de nøjagtige felter, du vil nulstille efter en vellykket filupload.

Heldigvis giver useRef krogen en enkel løsning. Lær, hvordan du kan rydde et filindtastningsfelt med useRef-hook efter en vellykket upload.

Oprettelse af en simpel uploadformular

For at demonstrere, hvordan du nulstiller et filindtastningsfelt med useRef, skal du oprette en simpel reaktionsformular med et inputfelt, der accepterer et billede.

Først skal du opsætte en tilstandsværdi med navnet selectedFile ved hjælp af useState-krogen for at spore den valgte fil. Starttilstanden for valgt fil vil være null, da brugeren ikke har valgt en fil endnu.

Opret også en behandlerfunktion kaldet handleFileChange, der opdaterer den valgte filtilstand, når en bruger vælger en fil. Tilføj en anden funktion kaldet handleSubmit, som skal uploade tilstanden, når en bruger uploader filen.

importere { useState } fra"reagere";
fungereFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(nul);
konst handleFileChange = (begivenhed) => {
 setSelectedFile (event.target.files[0]);
 };
konst handleSubmit = (begivenhed) => {
 event.preventDefault();
 };
Vend tilbage (
 <>


"filinput">Vælg en fil:</label>
"fil" id="filinput" onChange={handleFileChange} />
"Indsend">Upload</button>
 </form>
 </>
 );
}

Når filoverførslen er færdig, bør applikationen rydde inputfeltet, hvilket du vil lære, hvordan du gør nedenfor.

Ryd indtastningsfeltet efter en filupload

Hvis dette var et tekstfelt, kunne du rydde inputtet ved at indstille tilstanden til en tom streng:

setSelectedFile("")

Men dette vil ikke fungere med et inputfelt af typen fil. Indstilling af den valgte felttilstandsvariabel til en tom streng fjerner kun fildataene fra tilstanden og ikke fra DOM. Dette skyldes, at denne tilstand ikke refererer til inputværdien.

For at rydde inputværdien skal du oprette en reference til filinputtet ved hjælp af useRef-krogen. I dette eksempel skal du importere useRef fra React og oprette et ref-objekt kaldet fileRef:

importere { useState, useRef } fra"reagere";
fungereFileUploadForm() {
// ...
konst fileRef = useRef()
Vend tilbage (
// ...
 );
}

Henvis derefter til refen i indtastningsfeltet som vist nedenfor.

"filinput">Vælg en fil:</label>
 type="fil"
 id="filinput"
 onChange={handleFileChange}
 ref={filRef}
 />
"Indsend">Upload</button>
</form>

React indstiller nuværende egenskaben for ref-variablen til DOM-elementet, hvilket betyder, at du kan få filværdien som denne:

filRef.aktuel.værdi

Du kan derefter nulstille denne værdi ved at tildele den null.

fileRef.current.value = nul

Indkapsl dette i en funktion ved navn handleReset som denne:

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

Kald derefter denne funktion, når du uploader en fil for at rydde inputfeltet.

Hvorfor du bør nulstille inputfelter efter filupload

Det er generelt en god praksis at nulstille inputfeltet efter en vellykket filupload. Dette er fordi det giver brugeren en klar indikation af, at deres upload var vellykket og også giver dem mulighed for at uploade en anden fil uden at skulle rydde input manuelt Mark.