Πώς το useRef Hook του React μπορεί να σας βοηθήσει να επαναφέρετε ένα πεδίο εισαγωγής μετά από μια επιτυχή μεταφόρτωση

Χρησιμοποιώντας το React, μπορεί να σας φανεί πιο δύσκολο να επαναφέρετε ορισμένα πεδία εισαγωγής από άλλα. Συγκεκριμένα, οι εισαγωγές αρχείων μπορεί να είναι προβληματικές, ωστόσο αυτά είναι τα ακριβή πεδία που θα θέλετε να επαναφέρετε μετά από μια επιτυχημένη μεταφόρτωση αρχείου.

Ευτυχώς, το άγκιστρο useRef παρέχει μια απλή λύση. Μάθετε πώς μπορείτε να διαγράψετε ένα πεδίο εισαγωγής αρχείου με το άγκιστρο useRef μετά από μια επιτυχημένη μεταφόρτωση.

Δημιουργία Απλής Φόρμας Μεταφόρτωσης

Για να δείξετε πώς να επαναφέρετε ένα πεδίο εισαγωγής αρχείου με το useRef, θα το κάνετε δημιουργήστε μια απλή φόρμα React με ένα πεδίο εισαγωγής που δέχεται μια εικόνα.

Αρχικά, ορίστε μια τιμή κατάστασης με το όνομα SelectFile χρησιμοποιώντας το άγκιστρο useState για να παρακολουθείτε το επιλεγμένο αρχείο. Η αρχική κατάσταση για το selectedFile θα είναι μηδενική, καθώς ο χρήστης δεν έχει επιλέξει ακόμα αρχείο.

Επίσης, δημιουργήστε μια συνάρτηση χειριστή που ονομάζεται handleFileChange που ενημερώνει την κατάσταση του επιλεγμένου αρχείου όταν ένας χρήστης επιλέγει ένα αρχείο. Προσθέστε μια δεύτερη συνάρτηση που ονομάζεται handleSubmit, η οποία θα πρέπει να ανεβάζει την κατάσταση όταν ένας χρήστης ανεβάζει το αρχείο.

εισαγωγή { useState } από"αντιδρώ";
λειτουργίαFileUploadForm() {
συνθ [selectedFile, setSelectedFile] = useState(μηδενικό);
συνθ handleFileChange = (Εκδήλωση) => {
 setSelectedFile (event.target.files[0]);
 };
συνθ handleΥποβολή = (Εκδήλωση) => {
 event.preventDefault();
 };
ΕΠΙΣΤΡΟΦΗ (
 <>


"fileInput">Επιλέξτε ένα αρχείο:</label>
"αρχείο" id="fileInput" onChange={handleFileChange} />
"υποβάλλουν">Μεταφόρτωση</button>
 </form>
 </>
 );
}

Όταν ολοκληρωθεί η μεταφόρτωση του αρχείου, η εφαρμογή θα πρέπει να διαγράψει το πεδίο εισαγωγής, το οποίο θα μάθετε πώς να το κάνετε παρακάτω.

Διαγράψτε το πεδίο εισαγωγής μετά τη μεταφόρτωση αρχείου

Εάν αυτό ήταν ένα πεδίο κειμένου, θα μπορούσατε να διαγράψετε την είσοδο ορίζοντας την κατάσταση σε μια κενή συμβολοσειρά:

setSelectedFile("")

Αλλά αυτό δεν θα λειτουργήσει με ένα πεδίο εισαγωγής τύπου αρχείο. Ο ορισμός της μεταβλητής SelectField State σε μια κενή συμβολοσειρά αφαιρεί μόνο τα δεδομένα αρχείου από την κατάσταση και όχι από το DOM. Αυτό συμβαίνει επειδή αυτή η κατάσταση δεν αναφέρεται στην τιμή εισόδου.

Για να διαγράψετε την τιμή εισόδου, πρέπει να δημιουργήσετε μια αναφορά στην είσοδο του αρχείου χρησιμοποιώντας το άγκιστρο useRef. Σε αυτό το παράδειγμα, εισαγάγετε το useRef από το React και δημιουργήστε ένα αντικείμενο ref που ονομάζεται fileRef:

εισαγωγή { useState, useRef } από"αντιδρώ";
λειτουργίαFileUploadForm() {
// ...
συνθ fileRef = useRef()
ΕΠΙΣΤΡΟΦΗ (
// ...
 );
}

Στη συνέχεια, ανατρέξτε στο ref στο πεδίο εισαγωγής όπως φαίνεται παρακάτω.

"fileInput">Επιλέξτε ένα αρχείο:</label>
 τύπος="αρχείο"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"υποβάλλουν">Μεταφόρτωση</button>
</form>

Το React θέτει το ρεύμα ιδιότητα της μεταβλητής ref στο στοιχείο DOM που σημαίνει ότι μπορείτε να λάβετε την τιμή του αρχείου ως εξής:

fileRef.current.value

Στη συνέχεια, μπορείτε να επαναφέρετε αυτήν την τιμή εκχωρώντας null σε αυτήν.

fileRef.current.value = μηδενικό

Ενσωματώστε το σε μια συνάρτηση με το όνομα handleReset ως εξής:

συνθ handleReset = () => {
 fileRef.current.value = μηδενικό;
};

Στη συνέχεια, καλέστε αυτήν τη λειτουργία όταν ανεβάσετε με επιτυχία ένα αρχείο για να διαγράψετε το πεδίο εισαγωγής.

Γιατί πρέπει να επαναφέρετε τα πεδία εισαγωγής μετά τη μεταφόρτωση αρχείων

Είναι γενικά μια καλή πρακτική να επαναφέρετε το πεδίο εισαγωγής μετά από μια επιτυχημένη μεταφόρτωση αρχείου. Αυτό συμβαίνει επειδή δίνει στον χρήστη μια σαφή ένδειξη ότι η μεταφόρτωσή του ήταν επιτυχής και επίσης τους παρέχει την ευκαιρία να ανεβάσουν ένα άλλο αρχείο χωρίς να χρειάζεται να διαγράψουν με μη αυτόματο τρόπο την είσοδο πεδίο.