Kako vam Reactova useRef kuka može pomoći da poništite polje za unos nakon uspješnog prijenosa

Koristeći React, možda će vam biti nezgodnije resetirati neka polja za unos od drugih. Konkretno, unosi datoteka mogu biti problematični, ali to su točno ona polja koja ćete htjeti poništiti nakon uspješnog učitavanja datoteke.

Srećom, kuka useRef pruža jednostavno rješenje. Naučite kako možete obrisati polje za unos datoteke pomoću kuke useRef nakon uspješnog učitavanja.

Stvaranje jednostavnog obrasca za učitavanje

Da biste demonstrirali kako poništiti polje za unos datoteke pomoću useRef, morat ćete stvoriti jednostavan React obrazac s poljem za unos koje prihvaća sliku.

Najprije postavite vrijednost stanja pod nazivom selectedFile pomoću kuke useState za praćenje odabrane datoteke. Početno stanje za selectedFile bit će null budući da korisnik još nije odabrao datoteku.

Također, stvorite funkciju rukovatelja pod nazivom handleFileChange koja ažurira stanje selectedFile kada korisnik odabere datoteku. Dodajte drugu funkciju pod nazivom handleSubmit, koja bi trebala prenijeti stanje kada korisnik učita datoteku.

uvoz {useState} iz"reagirati";
funkcijaFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(ništavan);
konst handleFileChange = (događaj) => {
 setSelectedFile (event.target.files[0]);
 };
konst handleSubmit = (događaj) => {
 event.preventDefault();
 };
povratak (
 <>


"fileInput">Odaberite datoteku:</label>
"datoteka" id="fileInput" onChange={handleFileChange} />
"podnijeti">Učitaj</button>
 </form>
 </>
 );
}

Kada je učitavanje datoteke završeno, aplikacija bi trebala obrisati polje za unos, što ćete naučiti kako učiniti u nastavku.

Očistite polje za unos nakon učitavanja datoteke

Da je ovo tekstualno polje, mogli biste izbrisati unos postavljanjem stanja na prazan niz:

setSelectedFile("")

Ali ovo neće raditi s poljem za unos vrste datoteka. Postavljanje varijable stanja selectedField na prazan niz samo uklanja podatke datoteke iz stanja, a ne iz DOM-a. To je zato što se ovo stanje ne odnosi na ulaznu vrijednost.

Da biste izbrisali ulaznu vrijednost, morate stvoriti referencu na unos datoteke pomoću kuke useRef. U ovom primjeru uvezite useRef iz Reacta i stvorite ref objekt pod nazivom fileRef:

uvoz {useState, useRef} iz"reagirati";
funkcijaFileUploadForm() {
// ...
konst fileRef = useRef()
povratak (
// ...
 );
}

Zatim referencirajte ref u polju za unos kao što je prikazano u nastavku.

"fileInput">Odaberite datoteku:</label>
 vrsta="datoteka"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"podnijeti">Učitaj</button>
</form>

React postavlja Trenutno svojstvo ref varijable na DOM element što znači da možete dobiti vrijednost datoteke ovako:

fileRef.current.value

Zatim možete poništiti ovu vrijednost tako da joj dodijelite null.

fileRef.current.value = ništavan

Enkapsulirajte ovo u funkciju pod nazivom handleReset ovako:

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

Zatim pozovite ovu funkciju kada uspješno učitate datoteku da biste očistili polje za unos.

Zašto biste trebali poništiti polja za unos nakon učitavanja datoteka

Općenito je dobra praksa resetirati polje za unos nakon uspješnog učitavanja datoteke. To je zato što korisniku daje jasnu naznaku da je njegov prijenos bio uspješan i također pruža im priliku za učitavanje druge datoteke bez potrebe za ručnim brisanjem unosa polje.