Jak vám useRef Hook od Reactu může pomoci resetovat vstupní pole po úspěšném nahrání

Při použití React může být nepohodlné resetovat některá vstupní pole než jiná. Problematické mohou být zejména vstupy do souborů, ale toto jsou přesná pole, která budete chtít po úspěšném nahrání souboru resetovat.

Naštěstí hák useRef poskytuje jednoduché řešení. Přečtěte si, jak můžete po úspěšném nahrání vymazat vstupní pole souboru pomocí háčku useRef.

Vytvoření jednoduchého formuláře pro nahrání

Chcete-li předvést, jak resetovat vstupní pole souboru pomocí useRef, budete vytvořit jednoduchý formulář React se vstupním polem, které přijímá obrázek.

Nejprve nastavte hodnotu stavu s názvem selectedFile pomocí háčku useState ke sledování vybraného souboru. Počáteční stav pro selectedFile bude null, protože uživatel ještě nevybral soubor.

Vytvořte také funkci handleru nazvanou handleFileChange, která aktualizuje stav selectedFile, když uživatel vybere soubor. Přidejte druhou funkci nazvanou handleSubmit, která by měla nahrát stav, kdy uživatel nahraje soubor.

import { useState } z"reagovat";
funkceFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(nula);
konst handleFileChange = (událost) => {
 setSelectedFile (event.target.files[0]);
 };
konst handleSubmit = (událost) => {
 event.preventDefault();
 };
vrátit se (
 <>


"fileInput">Vyberte soubor:</label>
"soubor" id="fileInput" onChange={handleFileChange} />
"Předložit">Nahrát</button>
 </form>
 </>
 );
}

Po dokončení nahrávání souboru by aplikace měla vymazat vstupní pole, jak to udělat níže.

Po nahrání souboru vymažte vstupní pole

Pokud se jednalo o textové pole, můžete zadání vymazat nastavením stavu na prázdný řetězec:

setSelectedFile("")

Ale to nebude fungovat se vstupním polem typu soubor. Nastavením stavové proměnné selectedField na prázdný řetězec odstraníte data souboru pouze ze stavu, nikoli z DOM. Důvodem je, že tento stav neodkazuje na vstupní hodnotu.

Chcete-li vymazat vstupní hodnotu, musíte vytvořit odkaz na vstup souboru pomocí háčku useRef. V tomto příkladu importujte useRef z React a vytvořte objekt ref s názvem fileRef:

import { useState, useRef } z"reagovat";
funkceFileUploadForm() {
// ...
konst fileRef = useRef()
vrátit se (
// ...
 );
}

Potom odkazujte na ref ve vstupním poli, jak je znázorněno níže.

"fileInput">Vyberte soubor:</label>
 typ="soubor"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Předložit">Nahrát</button>
</form>

React nastavuje aktuální vlastnost proměnné ref k prvku DOM, což znamená, že můžete získat hodnotu souboru takto:

fileRef.current.value

Tuto hodnotu pak můžete resetovat přiřazením hodnoty null.

fileRef.current.value = nula

Zapouzdřte to do funkce s názvem handleReset takto:

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

Poté zavolejte tuto funkci, když úspěšně nahrajete soubor, abyste vymazali vstupní pole.

Proč byste měli po nahrání souboru resetovat vstupní pole

Obecně je dobrým zvykem po úspěšném nahrání souboru resetovat vstupní pole. Je to proto, že dává uživateli jasnou indikaci, že jeho nahrání bylo úspěšné a také poskytuje jim příležitost nahrát další soubor, aniž by museli ručně mazat vstup pole.