W jaki sposób hook useRef w React może pomóc zresetować pole wejściowe po pomyślnym przesłaniu

Używając React, resetowanie niektórych pól wejściowych może być dla ciebie bardziej kłopotliwe niż innych. W szczególności wprowadzanie plików może być problematyczne, ale są to dokładnie pola, które chcesz zresetować po pomyślnym przesłaniu pliku.

Na szczęście hak useRef zapewnia proste rozwiązanie. Dowiedz się, jak wyczyścić pole wprowadzania pliku za pomocą haka useRef po pomyślnym przesłaniu.

Tworzenie prostego formularza przesyłania

Aby zademonstrować, jak zresetować pole wejściowe pliku za pomocą useRef, będziesz utwórz prosty formularz React z polem wejściowym, które akceptuje obraz.

Najpierw skonfiguruj wartość stanu o nazwie selectedFile, używając haka useState do śledzenia wybranego pliku. Stan początkowy dla selectedFile będzie miał wartość null, ponieważ użytkownik nie wybrał jeszcze pliku.

Utwórz także funkcję obsługi o nazwie handleFileChange, która aktualizuje stan selectedFile, gdy użytkownik wybierze plik. Dodaj drugą funkcję o nazwie handleSubmit, która powinna przesyłać stan, gdy użytkownik przesyła plik.

import { stan użycia } z"reagować";
funkcjonowaćPrześlij plikFormularz() {
konst [wybrany plik, ustaw wybrany plik] = useState (zero);
konst uchwytZmianaPliku = (wydarzenie) => {
 setSelectedFile (event.target.files[0]);
 };
konst uchwyt Prześlij = (wydarzenie) => {
 zdarzenie.preventDefault();
 };
powrót (
 <>


„wejście pliku”>Wybierz plik:</label>
"plik" identyfikator=„wejście pliku” onChange={handleFileChange} />
"składać">Prześlij</button>
 </form>
 </>
 );
}

Po zakończeniu przesyłania pliku aplikacja powinna wyczyścić pole wprowadzania, co dowiesz się poniżej.

Wyczyść pole wejściowe po przesłaniu pliku

Gdyby to było pole tekstowe, można wyczyścić dane wejściowe, ustawiając stan na pusty łańcuch:

ustaw wybrany plik ("")

Ale to nie zadziała z polem wejściowym typu plik. Ustawienie zmiennej stanu selectedField na pusty łańcuch usuwa tylko dane pliku ze stanu, a nie z drzewa DOM. Dzieje się tak, ponieważ ten stan nie odwołuje się do wartości wejściowej.

Aby wyczyścić wartość wejściową, musisz utworzyć odwołanie do pliku wejściowego za pomocą haka useRef. W tym przykładzie zaimportuj useRef z React i utwórz obiekt ref o nazwie fileRef:

import { useState, useRef } z"reagować";
funkcjonowaćPrześlij plikFormularz() {
// ...
konst fileRef = użyjRef()
powrót (
// ...
 );
}

Następnie odwołaj się do ref w polu wejściowym, jak pokazano poniżej.

„wejście pliku”>Wybierz plik:</label>
 typ="plik"
 identyfikator=„wejście pliku”
 onChange={handleFileChange}
 ref={fileRef}
 />
"składać">Prześlij</button>
</form>

Reaguj ustawia aktualny właściwość zmiennej ref do elementu DOM, co oznacza, że ​​możesz uzyskać wartość pliku w następujący sposób:

plikRef.bieżąca.wartość

Następnie możesz zresetować tę wartość, przypisując jej wartość null.

fileRef.bieżąca.wartość = zero

Zawrzyj to w funkcji o nazwie handleReset w ten sposób:

konst uchwytResetuj = () => {
 fileRef.bieżąca.wartość = zero;
};

Następnie wywołaj tę funkcję, gdy pomyślnie prześlesz plik, aby wyczyścić pole wprowadzania.

Dlaczego należy zresetować pola wejściowe po przesłaniu pliku

Ogólnie dobrą praktyką jest zresetowanie pola wprowadzania po pomyślnym przesłaniu pliku. Dzieje się tak, ponieważ daje użytkownikowi wyraźną wskazówkę, że jego przesłanie się powiodło, a także zapewnia im możliwość przesłania kolejnego pliku bez konieczności ręcznego usuwania danych wejściowych pole.