Ako vám môže useRef Hook od Reactu pomôcť obnoviť vstupné pole po úspešnom odovzdaní

Pomocou funkcie React sa vám môže zdať nepohodlné resetovať niektoré vstupné polia ako iné. Problematické môžu byť najmä vstupy do súborov, no toto sú presné polia, ktoré budete chcieť po úspešnom nahraní súboru obnoviť.

Našťastie hák useRef poskytuje jednoduché riešenie. Zistite, ako môžete po úspešnom odovzdaní vymazať vstupné pole súboru pomocou háku useRef.

Vytvorenie formulára jednoduchého nahrávania

Ak chcete ukázať, ako resetovať vstupné pole súboru pomocou useRef, budete vytvorte jednoduchý formulár React so vstupným poľom, ktoré prijíma obrázok.

Najprv nastavte hodnotu stavu s názvom selectedFile pomocou háku useState na sledovanie vybraného súboru. Počiatočný stav pre selectedFile bude nulový, pretože používateľ ešte nevybral súbor.

Vytvorte tiež funkciu handlera s názvom handleFileChange, ktorá aktualizuje stav selectedFile, keď používateľ vyberie súbor. Pridajte druhú funkciu s názvom handleSubmit, ktorá by mala nahrať stav, keď používateľ nahrá súbor.

importovať { useState } od"reagovať";
funkciuFileUploadForm() {
konšt [selectedFile, setSelectedFile] = useState(nulový);
konšt handleFileChange = (udalosť) => {
 setSelectedFile (event.target.files[0]);
 };
konšt handleSubmit = (udalosť) => {
 event.preventDefault();
 };
vrátiť (
 <>


"fileInput">Vyberte súbor:</label>
"súbor" id="fileInput" onChange={handleFileChange} />
"Predložiť">Nahrať</button>
 </form>
 </>
 );
}

Po dokončení nahrávania súboru by aplikácia mala vymazať vstupné pole, ako to urobiť nižšie.

Po odovzdaní súboru vymažte vstupné pole

Ak to bolo textové pole, vstup môžete vymazať nastavením stavu na prázdny reťazec:

setSelectedFile("")

Toto však nebude fungovať so vstupným poľom typu súbor. Nastavenie premennej stavu selectedField na prázdny reťazec odstráni iba údaje súboru zo stavu a nie z DOM. Dôvodom je, že tento stav neodkazuje na vstupnú hodnotu.

Ak chcete vymazať vstupnú hodnotu, musíte vytvoriť odkaz na vstup súboru pomocou háku useRef. V tomto príklade importujte useRef z React a vytvorte ref objekt s názvom fileRef:

importovať { useState, useRef } od"reagovať";
funkciuFileUploadForm() {
// ...
konšt fileRef = useRef()
vrátiť (
// ...
 );
}

Potom uveďte referenciu vo vstupnom poli, ako je uvedené nižšie.

"fileInput">Vyberte súbor:</label>
 typ="súbor"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Predložiť">Nahrať</button>
</form>

React nastavuje prúd vlastnosť premennej ref na prvok DOM, čo znamená, že hodnotu súboru môžete získať takto:

fileRef.current.value

Túto hodnotu potom môžete vynulovať priradením hodnoty null.

fileRef.current.value = nulový

Zapúzdrite to do funkcie s názvom handleReset takto:

konšt handleReset = () => {
 fileRef.current.value = nulový;
};

Potom zavolajte túto funkciu, keď úspešne nahráte súbor, aby ste vymazali vstupné pole.

Prečo by ste mali resetovať vstupné polia po odovzdaní súborov

Vo všeobecnosti je dobrým zvykom po úspešnom nahraní súboru vynulovať vstupné pole. Je to preto, že dáva používateľovi jasnú indikáciu, že jeho nahranie bolo úspešné a tiež poskytuje im možnosť nahrať ďalší súbor bez toho, aby museli manuálne vymazať vstup lúka.