Hur Reacts useRef Hook kan hjälpa dig att återställa ett inmatningsfält efter en lyckad uppladdning

Med React kan du tycka att det är svårare att återställa vissa inmatningsfält än andra. I synnerhet kan filinmatningar vara problematiska, men det är de exakta fälten du vill återställa efter en lyckad filuppladdning.

Tack och lov ger useRef-kroken en enkel lösning. Lär dig hur du kan rensa ett filinmatningsfält med useRef-kroken efter en lyckad uppladdning.

Skapa ett enkelt uppladdningsformulär

För att demonstrera hur man återställer ett filinmatningsfält med useRef, ska du skapa ett enkelt React-formulär med ett inmatningsfält som accepterar en bild.

Ställ först in ett tillståndsvärde med namnet selectedFile med hjälp av useState-kroken för att spåra den valda filen. Det initiala tillståndet för selectFile kommer att vara null eftersom användaren inte har valt en fil ännu.

Skapa också en hanterarfunktion som heter handleFileChange som uppdaterar det valda filtillståndet när en användare väljer en fil. Lägg till en andra funktion som heter handleSubmit, som ska ladda upp statusen när en användare laddar upp filen.

importera { useState } från"reagera";
fungeraFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(null);
konst handleFileChange = (händelse) => {
 setSelectedFile (event.target.files[0]);
 };
konst handleSubmit = (händelse) => {
 event.preventDefault();
 };
lämna tillbaka (
 <>


"filinmatning">Välj en fil:</label>
"fil" id="filinmatning" onChange={handleFileChange} />
"Skicka in">Ladda upp</button>
 </form>
 </>
 );
}

När filuppladdningen är klar bör applikationen rensa inmatningsfältet, vilket du lär dig hur du gör nedan.

Rensa inmatningsfältet efter en filuppladdning

Om detta var ett textfält kan du rensa inmatningen genom att ställa in tillståndet till en tom sträng:

setSelectedFile("")

Men det här fungerar inte med ett inmatningsfält av typen fil. Att ställa in den valda fälttillståndsvariabeln till en tom sträng tar bara bort fildata från tillståndet och inte från DOM. Detta beror på att detta tillstånd inte refererar till ingångsvärdet.

För att rensa inmatningsvärdet måste du skapa en referens till filinmatningen med hjälp av useRef-kroken. I det här exemplet, importera useRef från React och skapa ett ref-objekt som heter fileRef:

importera { useState, useRef } från"reagera";
fungeraFileUploadForm() {
// ...
konst fileRef = useRef()
lämna tillbaka (
// ...
 );
}

Referera sedan till ref i inmatningsfältet som visas nedan.

"filinmatning">Välj en fil:</label>
 typ="fil"
 id="filinmatning"
 onChange={handleFileChange}
 ref={filRef}
 />
"Skicka in">Ladda upp</button>
</form>

React ställer in nuvarande egenskapen för variabeln ref till DOM-elementet vilket betyder att du kan få filvärdet så här:

fileRef.current.value

Du kan sedan återställa detta värde genom att tilldela det null.

fileRef.current.value = null

Kapsla in detta i en funktion som heter handleReset så här:

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

Anropa sedan den här funktionen när du har laddat upp en fil för att rensa inmatningsfältet.

Varför du bör återställa inmatningsfält efter filuppladdningar

Det är i allmänhet en bra praxis att återställa inmatningsfältet efter en lyckad filuppladdning. Detta beror på att det ger användaren en tydlig indikation på att deras uppladdning var framgångsrik och också ger dem en möjlighet att ladda upp en annan fil utan att behöva rensa inmatningen manuellt fält.