Cum vă poate ajuta utilizarea React Ref Hook să resetați un câmp de intrare după o încărcare cu succes

Folosind React, s-ar putea să vi se pară mai incomod să resetați unele câmpuri de intrare decât altele. În special, intrările de fișiere pot fi problematice, dar acestea sunt câmpurile exacte pe care veți dori să le resetați după o încărcare cu succes a fișierului.

Din fericire, cârligul useRef oferă o soluție simplă. Aflați cum puteți șterge un câmp de introducere a fișierului cu ajutorul cârligului useRef după o încărcare cu succes.

Crearea unui formular simplu de încărcare

Pentru a demonstra cum să resetați un câmp de introducere a fișierului cu useRef, veți creați un formular React simplu cu un câmp de intrare care acceptă o imagine.

Mai întâi, configurați o valoare de stare numită selectedFile folosind cârligul useState pentru a urmări fișierul selectat. Starea inițială pentru selectedFile va fi nulă, deoarece utilizatorul nu a selectat încă un fișier.

De asemenea, creați o funcție de gestionare numită handleFileChange care actualizează starea SelectFile atunci când un utilizator selectează un fișier. Adăugați o a doua funcție numită handleSubmit, care ar trebui să încarce starea când un utilizator încarcă fișierul.

import { useState } din"reacţiona";
funcţieFileUploadForm() {
const [selectedFile, setSelectedFile] = useState(nul);
const handleFileChange = (eveniment) => {
 setSelectedFile (event.target.files[0]);
 };
const handleSubmit = (eveniment) => {
 event.preventDefault();
 };
întoarcere (
 <>


"fileInput">Alegeți un fișier:</label>
"fişier" id="fileInput" onChange={handleFileChange} />
"Trimite">Încărcați</button>
 </form>
 </>
 );
}

Când încărcarea fișierului este completă, aplicația ar trebui să șterge câmpul de introducere, ceea ce veți afla cum să faceți mai jos.

Ștergeți câmpul de introducere după încărcarea unui fișier

Dacă acesta a fost un câmp de text, puteți șterge intrarea setând starea la un șir gol:

setSelectedFile("")

Dar acest lucru nu va funcționa cu un câmp de intrare de tip fişier. Setarea variabilei de stare SelectField la un șir gol elimină numai datele fișierului din stare și nu din DOM. Acest lucru se datorează faptului că această stare nu face referire la valoarea de intrare.

Pentru a șterge valoarea de intrare, trebuie să creați o referință la intrarea fișierului folosind cârligul useRef. În acest exemplu, importați useRef din React și creați un obiect ref numit fileRef:

import { useState, useRef } din"reacţiona";
funcţieFileUploadForm() {
// ...
const fileRef = useRef()
întoarcere (
// ...
 );
}

Apoi faceți referire la referință în câmpul de introducere, așa cum se arată mai jos.

"fileInput">Alegeți un fișier:</label>
 tip="fişier"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Trimite">Încărcați</button>
</form>

React setează actual proprietatea variabilei ref la elementul DOM, ceea ce înseamnă că puteți obține valoarea fișierului astfel:

fileRef.current.value

Puteți apoi să resetați această valoare atribuindu-i null.

fileRef.current.value = nul

Încapsulați acest lucru într-o funcție numită handleReset astfel:

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

Apoi apelați această funcție când încărcați cu succes un fișier pentru a șterge câmpul de introducere.

De ce ar trebui să resetați câmpurile de introducere după încărcarea fișierelor

În general, este o practică bună să resetați câmpul de introducere după încărcarea cu succes a fișierului. Acest lucru se datorează faptului că îi oferă utilizatorului o indicație clară că încărcarea lor a avut succes și, de asemenea le oferă posibilitatea de a încărca un alt fișier fără a fi nevoie să ștergeți manual introducerea camp.