Wie der useRef-Hook von React Ihnen helfen kann, ein Eingabefeld nach einem erfolgreichen Upload zurückzusetzen

Wenn Sie React verwenden, finden Sie es möglicherweise umständlicher, einige Eingabefelder zurückzusetzen als andere. Insbesondere Dateieingaben können problematisch sein, aber genau diese Felder sollten Sie nach einem erfolgreichen Datei-Upload zurücksetzen.

Glücklicherweise bietet der Hook useRef eine einfache Lösung. Erfahren Sie, wie Sie nach einem erfolgreichen Upload ein Dateieingabefeld mit dem useRef-Hook löschen können.

Erstellen eines einfachen Upload-Formulars

Um zu demonstrieren, wie Sie ein Dateieingabefeld mit useRef zurücksetzen, werden Sie Erstellen Sie ein einfaches Reaktionsformular mit einem Eingabefeld, das ein Bild akzeptiert.

Richten Sie zuerst einen Zustandswert namens selectedFile ein, indem Sie den useState-Hook verwenden, um die ausgewählte Datei zu verfolgen. Der Anfangszustand für selectedFile ist null, da der Benutzer noch keine Datei ausgewählt hat.

Erstellen Sie außerdem eine Handler-Funktion namens handleFileChange, die den Status selectedFile aktualisiert, wenn ein Benutzer eine Datei auswählt. Fügen Sie eine zweite Funktion namens handleSubmit hinzu, die den Status hochladen soll, wenn ein Benutzer die Datei hochlädt.

importieren { useState } aus"reagieren";
FunktionFileUploadFormular() {
konst [ausgewählteDatei, setAusgewählteDatei] = useState(Null);
konst handleFileChange = (Fall) => {
 setSelectedFile (event.target.files[0]);
 };
konst handleSubmit = (Fall) => {
 event.preventDefault();
 };
zurückkehren (
 <>


"fileInput">Datei auswählen:</label>
"Datei" id="fileInput" onChange={handleFileChange} />
"einreichen">Hochladen</button>
 </form>
 </>
 );
}

Wenn der Datei-Upload abgeschlossen ist, sollte die Anwendung das Eingabefeld löschen, was Sie unten erfahren.

Leeren Sie das Eingabefeld nach einem Datei-Upload

Wenn dies ein Textfeld wäre, könnten Sie die Eingabe löschen, indem Sie den Status auf eine leere Zeichenfolge setzen:

setSelectedFile("")

Aber das funktioniert nicht mit einem Eingabefeld vom Typ Datei. Wenn Sie die Zustandsvariable selectedField auf einen leeren String setzen, werden die Dateidaten nur aus dem Zustand und nicht aus dem DOM entfernt. Dies liegt daran, dass dieser Zustand nicht auf den Eingangswert verweist.

Um den Eingabewert zu löschen, müssen Sie mithilfe des useRef-Hooks eine Referenz auf die Dateieingabe erstellen. Importiere in diesem Beispiel useRef aus React und erstelle ein Ref-Objekt namens fileRef:

importieren { useState, useRef } aus"reagieren";
FunktionFileUploadFormular() {
// ...
konst fileRef = useRef()
zurückkehren (
// ...
 );
}

Verweisen Sie dann auf die Referenz im Eingabefeld, wie unten gezeigt.

"fileInput">Datei auswählen:</label>
 Typ="Datei"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"einreichen">Hochladen</button>
</form>

Reagieren setzt die aktuell -Eigenschaft der ref-Variable zum DOM-Element, was bedeutet, dass Sie den Dateiwert wie folgt erhalten können:

fileRef.aktueller.Wert

Sie können diesen Wert dann zurücksetzen, indem Sie ihm null zuweisen.

fileRef.aktueller.Wert = Null

Kapseln Sie dies in einer Funktion namens handleReset wie folgt ein:

konst handleReset = () => {
 fileRef.aktueller.Wert = Null;
};

Rufen Sie diese Funktion dann auf, wenn Sie erfolgreich eine Datei hochgeladen haben, um das Eingabefeld zu löschen.

Warum Sie Eingabefelder nach Datei-Uploads zurücksetzen sollten

Es empfiehlt sich im Allgemeinen, das Eingabefeld nach einem erfolgreichen Datei-Upload zurückzusetzen. Dies liegt daran, dass es dem Benutzer einen klaren Hinweis darauf gibt, dass sein Upload erfolgreich war und auch bietet ihnen die Möglichkeit, eine weitere Datei hochzuladen, ohne die Eingabe manuell löschen zu müssen Feld.