Kuidas reageerib Ref Hook kasutamine pärast edukat üleslaadimist aitab teil sisendvälja lähtestada

Reacti kasutades võib mõne sisestusvälja lähtestamine olla ebamugavam kui teiste jaoks. Eelkõige võivad probleemsed olla failisisendid, kuid need on täpselt need väljad, mille soovite pärast edukat faili üleslaadimist lähtestada.

Õnneks pakub useRef konks lihtsat lahendust. Siit saate teada, kuidas saate pärast edukat üleslaadimist failisisestusvälja kustutada konksuga useRef.

Lihtsa üleslaadimisvormi loomine

Et näidata, kuidas lähtestada failisisestusvälja funktsiooni useRef abil, peate luua lihtne Reacti vorm sisestusväljaga, mis aktsepteerib pilti.

Esmalt seadistage valitud faili jälgimiseks konksu useState abil olekuväärtus nimega selectedFile. Valitud faili algolek on null, kuna kasutaja pole veel faili valinud.

Samuti looge käitleja funktsioon HandelFileChange, mis värskendab valitud faili olekut, kui kasutaja faili valib. Lisage teine ​​funktsioon nimega handleSubmit, mis peaks üles laadima oleku, kui kasutaja faili üles laadib.

importida { useState } alates"reageerida";
funktsiooniFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(null);
konst handleFileChange = (sündmus) => {
 setSelectedFile (sündmus.target.files[0]);
 };
konst käepideEsita = (sündmus) => {
 event.preventDefault();
 };
tagasi (
 <>


"faili sisend">Valige fail:</label>
"fail" id="faili sisend" onChange={handleFileChange} />
"Esita">Laadi üles</button>
 </form>
 </>
 );
}

Kui faili üleslaadimine on lõppenud, peaks rakendus sisestusvälja tühjendama, mida saate teha allpool.

Pärast faili üleslaadimist tühjendage sisestusväli

Kui see oli tekstiväli, saate sisendi tühjendada, määrates olekuks tühja stringi:

setSelectedFile("")

Kuid see ei tööta tüüpi sisestusväljaga faili. Valitud välja olekumuutuja määramine tühjaks stringiks eemaldab faili andmed ainult olekust, mitte DOM-ist. Seda seetõttu, et see olek ei viita sisendväärtusele.

Sisendväärtuse tühjendamiseks peate konksu useRef abil looma viite failisisendile. Selles näites importige Reactist useRef ja looge ref-objekt nimega fileRef:

importida { useState, useRef } alates"reageerida";
funktsiooniFileUploadForm() {
// ...
konst fileRef = useRef()
tagasi (
// ...
 );
}

Seejärel viidake viitele sisestusväljal, nagu allpool näidatud.

"faili sisend">Valige fail:</label>
 tüüp="fail"
 id="faili sisend"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Esita">Laadi üles</button>
</form>

React määrab praegune DOM-elemendi ref-muutuja omadus, mis tähendab, et saate faili väärtuse järgmiselt:

fileRef.current.value

Seejärel saate selle väärtuse lähtestada, määrates sellele nulli.

fileRef.current.value = null

Kapseldage see funktsiooni nimega handleReset järgmiselt:

konst käepide Lähtesta = () => {
 fileRef.current.value = null;
};

Seejärel kutsuge see funktsioon välja, kui olete faili edukalt üles laadinud, et sisestusväli tühjendada.

Miks peaksite pärast failide üleslaadimist sisestusväljad lähtestama

Üldiselt on hea tava pärast faili edukat üleslaadimist sisestusvälja lähtestada. Seda seetõttu, et see annab kasutajale selgelt märku, et üleslaadimine oli edukas ja ka annab neile võimaluse laadida üles mõni muu fail, ilma et peaksid sisendit käsitsi tühjendama valdkonnas.