Kako vam Reactova useRef Hook lahko pomaga ponastaviti vnosno polje po uspešnem nalaganju

Z uporabo Reacta se vam bo morda zdelo bolj nerodno ponastaviti nekatera vnosna polja kot druga. Zlasti vnosi datotek so lahko problematični, vendar so to točno tista polja, ki jih boste želeli ponastaviti po uspešnem nalaganju datoteke.

K sreči kavelj useRef ponuja preprosto rešitev. Naučite se, kako po uspešnem nalaganju počistite polje za vnos datoteke s kavljem useRef.

Ustvarjanje preprostega obrazca za nalaganje

Če želite prikazati, kako ponastaviti vnosno polje datoteke z useRef, boste ustvarite preprost obrazec React z vnosnim poljem, ki sprejme sliko.

Najprej nastavite vrednost stanja z imenom selectedFile z uporabo kljuke useState za sledenje izbrani datoteki. Začetno stanje za selectedFile bo ničelno, ker uporabnik še ni izbral datoteke.

Ustvarite tudi funkcijo obdelovalca, imenovano handleFileChange, ki posodobi stanje izbrane datoteke, ko uporabnik izbere datoteko. Dodajte drugo funkcijo, imenovano handleSubmit, ki naj naloži stanje, ko uporabnik naloži datoteko.

uvoz {useState} od"reagirati";
funkcijoFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(nič);
konst handleFileChange = (dogodek) => {
 setSelectedFile (event.target.files[0]);
 };
konst handleSubmit = (dogodek) => {
 event.preventDefault();
 };
vrnitev (
 <>


"fileInput">Izberite datoteko:</label>
"mapa" id="fileInput" onChange={handleFileChange} />
"oddaj">Naloži</button>
 </form>
 </>
 );
}

Ko je nalaganje datoteke končano, mora aplikacija počistiti polje za vnos, kar boste izvedeli spodaj.

Po nalaganju datoteke počistite vnosno polje

Če bi bilo to besedilno polje, bi lahko počistili vnos tako, da stanje nastavite na prazen niz:

setSelectedFile("")

Vendar to ne bo delovalo z vnosnim poljem vrste mapa. Nastavitev spremenljivke stanja selectedField na prazen niz samo odstrani podatke datoteke iz stanja in ne iz DOM. To je zato, ker se to stanje ne sklicuje na vhodno vrednost.

Če želite počistiti vhodno vrednost, morate s kavljem useRef ustvariti sklic na vnos datoteke. V tem primeru uvozite useRef iz Reacta in ustvarite objekt ref z imenom fileRef:

uvoz {useState, useRef} od"reagirati";
funkcijoFileUploadForm() {
// ...
konst fileRef = useRef()
vrnitev (
// ...
 );
}

Nato se sklicujte na ref v vnosnem polju, kot je prikazano spodaj.

"fileInput">Izberite datoteko:</label>
 vrsta="mapa"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"oddaj">Naloži</button>
</form>

React nastavi trenutno lastnost spremenljivke ref elementu DOM, kar pomeni, da lahko vrednost datoteke dobite takole:

fileRef.current.value

To vrednost lahko nato ponastavite tako, da ji dodelite vrednost null.

fileRef.current.value = nič

Enkapsulirajte to v funkcijo z imenom handleReset takole:

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

Nato pokličite to funkcijo, ko uspešno naložite datoteko, da počistite vnosno polje.

Zakaj bi morali po nalaganju datotek ponastaviti vnosna polja

Na splošno je dobra praksa, da ponastavite vnosno polje po uspešnem nalaganju datoteke. To je zato, ker daje uporabniku jasen znak, da je bilo njegovo nalaganje uspešno in tudi jim omogoča, da naložijo drugo datoteko, ne da bi morali ročno počistiti vnos polje.