Bagaimana React's useRef Hook Dapat Membantu Anda Mereset Kolom Input Setelah Berhasil Mengunggah

Menggunakan React, Anda mungkin merasa lebih canggung untuk mengatur ulang beberapa bidang input daripada yang lain. Secara khusus, input file bisa menjadi masalah, namun ini adalah bidang persis yang ingin Anda atur ulang setelah file berhasil diunggah.

Untungnya, hook useRef memberikan solusi sederhana. Pelajari bagaimana Anda dapat mengosongkan bidang input file dengan kait useRef setelah unggahan berhasil.

Membuat Formulir Pengunggahan Sederhana

Untuk mendemonstrasikan cara mereset field input file dengan useRef, Anda akan buat formulir Bereaksi sederhana dengan kolom input yang menerima gambar.

Pertama, atur nilai status bernama selectedFile menggunakan hook useState untuk melacak file yang dipilih. Status awal untuk SelectFile akan menjadi null karena pengguna belum memilih file.

Juga, buat fungsi penangan yang disebut handleFileChange yang memperbarui status file yang dipilih saat pengguna memilih file. Tambahkan fungsi kedua bernama handleSubmit, yang akan mengunggah status saat pengguna mengunggah file.

impor { status penggunaan } dari"reaksi";
fungsiFileUploadForm() {
const [File terpilih, setSelectedFile] = useState(batal);
const menanganiFileChange = (peristiwa) => {
 setSelectedFile (event.target.files[0]);
 };
const handleSubmit = (peristiwa) => {
 event.preventDefault();
 };
kembali (
 <>


"masukan berkas">Pilih file:</label>
"mengajukan" id="masukan berkas" onChange={handleFileChange} />
"kirim">Unggah</button>
 </form>
 </>
 );
}

Saat pengunggahan file selesai, aplikasi harus mengosongkan kolom input, yang akan Anda pelajari caranya di bawah.

Kosongkan Bidang Input Setelah Mengunggah File

Jika ini adalah kolom teks, Anda dapat menghapus input dengan menyetel status ke string kosong:

setSelectedFile("")

Tapi ini tidak akan berfungsi dengan jenis kolom input mengajukan. Menyetel variabel status SelectField ke string kosong hanya akan menghapus data file dari status dan bukan dari DOM. Ini karena keadaan ini tidak mereferensikan nilai masukan.

Untuk menghapus nilai input, Anda harus membuat referensi ke input file menggunakan hook useRef. Dalam contoh ini, impor useRef dari React dan buat objek ref bernama fileRef:

impor { useState, useRef } dari"reaksi";
fungsiFileUploadForm() {
// ...
const fileRef = useRef()
kembali (
// ...
 );
}

Kemudian rujuk ref di bidang input seperti yang ditunjukkan di bawah ini.

"masukan berkas">Pilih file:</label>
 jenis="mengajukan"
 id="masukan berkas"
 onChange={menanganiFileChange}
 ref={fileRef}
 />
"kirim">Unggah</button>
</form>

Bereaksi mengatur saat ini milik variabel ref ke elemen DOM yang artinya Anda bisa mendapatkan nilai file seperti ini:

fileRef.current.value

Anda kemudian dapat mengatur ulang nilai ini dengan menugaskan null padanya.

fileRef.current.value = batal

Enkapsulasi ini dalam fungsi bernama handleReset seperti ini:

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

Kemudian panggil fungsi ini ketika Anda berhasil mengunggah file untuk menghapus kolom input.

Mengapa Anda Harus Mereset Bidang Input Setelah Mengunggah File

Biasanya merupakan praktik yang baik untuk mengatur ulang kolom input setelah file berhasil diunggah. Ini karena memberi pengguna indikasi yang jelas bahwa unggahan mereka berhasil dan juga memberi mereka kesempatan untuk mengunggah file lain tanpa harus menghapus input secara manual bidang.