Hogyan reagálhat a Ref Hook használata a sikeres feltöltés után a beviteli mező visszaállításában

A React használatával kínosabb lehet egyes beviteli mezők visszaállítása, mint másoké. Különösen a fájlbevitel okozhat problémát, mégis pontosan ezeket a mezőket kell visszaállítani a sikeres fájlfeltöltés után.

Szerencsére a useRef hook egyszerű megoldást kínál. Ismerje meg, hogyan törölhet fájlbeviteli mezőt a useRef hook segítségével sikeres feltöltés után.

Egyszerű feltöltési űrlap készítése

Annak bemutatásához, hogyan lehet visszaállítani egy fájlbeviteli mezőt a useRef segítségével, meg kell tennie hozzon létre egy egyszerű React űrlapot képet fogadó beviteli mezővel.

Először állítson be egy selectFile nevű állapotértéket a useState hook segítségével a kiválasztott fájl követéséhez. A selectedFile kezdeti állapota null lesz, mivel a felhasználó még nem választott ki fájlt.

Ezenkívül hozzon létre egy handleFileChange nevű kezelőfüggvényt, amely frissíti a kiválasztott fájl állapotát, amikor a felhasználó kiválaszt egy fájlt. Adjon hozzá egy második, handleSubmit nevű függvényt, amely feltölti az állapotot, amikor a felhasználó feltölti a fájlt.

import { useState } tól től"reagál";
funkcióFileUploadForm() {
const [selectedFile, setSelectedFile] = useState(nulla);
const handleFileChange = (esemény) => {
 setSelectedFile (event.target.files[0]);
 };
const handleSubmit = (esemény) => {
 event.preventDefault();
 };
Visszatérés (
 <>


"fileInput">Válassz egy fájlt:</label>
"fájl" id="fileInput" onChange={handleFileChange} />
"Beküldés">Feltöltés</button>
 </form>
 </>
 );
}

Amikor a fájl feltöltése befejeződött, az alkalmazásnak törölnie kell a beviteli mezőt, amit alább megtudhat.

Fájlfeltöltés után törölje a beviteli mezőt

Ha ez egy szövegmező, törölheti a bevitelt úgy, hogy az állapotot üres karakterláncra állítja:

setSelectedFile("")

De ez nem fog működni típusú beviteli mezővel fájlt. A kiválasztott mező állapotváltozójának üres karakterláncra állítása csak az állapotból távolítja el a fájladatokat, a DOM-ból nem. Ez azért van, mert ez az állapot nem hivatkozik a bemeneti értékre.

A bemeneti érték törléséhez létre kell hoznia egy hivatkozást a fájl bemenetére a useRef hook segítségével. Ebben a példában importálja a useRef-et a Reactból, és hozzon létre egy fileRef nevű ref objektumot:

import { useState, useRef } tól től"reagál";
funkcióFileUploadForm() {
// ...
const fileRef = useRef()
Visszatérés (
// ...
 );
}

Ezután hivatkozzon a ref-re a beviteli mezőben az alábbiak szerint.

"fileInput">Válassz egy fájlt:</label>
 típus="fájl"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Beküldés">Feltöltés</button>
</form>

A React beállítja a jelenlegi a ref változó tulajdonsága a DOM elemhez, ami azt jelenti, hogy a fájl értékét így kaphatja meg:

fileRef.current.value

Ezután visszaállíthatja ezt az értéket, ha null értéket rendel hozzá.

fileRef.current.value = nulla

Zárja be ezt a handleReset nevű függvénybe, így:

const handleReset = () => {
 fileRef.current.value = nulla;
};

Ezután hívja meg ezt a funkciót, amikor sikeresen feltöltött egy fájlt a beviteli mező törléséhez.

Miért érdemes visszaállítani a beviteli mezőket a fájlfeltöltés után?

Általában jó gyakorlat a beviteli mező visszaállítása sikeres fájlfeltöltés után. Ennek az az oka, hogy egyértelműen jelzi a felhasználó számára, hogy a feltöltés sikeres volt, és azt is lehetőséget biztosít számukra egy másik fájl feltöltésére anélkül, hogy manuálisan törölni kellene a bemenetet terület.