React'in useRef Hook'u, Başarılı Bir Yüklemeden Sonra Bir Giriş Alanını Sıfırlamanıza Nasıl Yardımcı Olabilir?

React'i kullanarak, bazı giriş alanlarını sıfırlamayı diğerlerinden daha garip bulabilirsiniz. Özellikle, dosya girişleri sorunlu olabilir, ancak bunlar başarılı bir dosya yüklemesinden sonra sıfırlamak isteyeceğiniz alanlardır.

Neyse ki, useRef kancası basit bir çözüm sunar. Başarılı bir yüklemeden sonra bir dosya giriş alanını useRef kancasıyla nasıl temizleyeceğinizi öğrenin.

Basit Karşıya Yükleme Formu Oluşturma

Bir dosya giriş alanını useRef ile nasıl sıfırlayacağınızı göstermek için, basit bir React formu oluşturun bir görüntüyü kabul eden bir giriş alanı ile.

İlk olarak, seçilen dosyayı izlemek için useState kancasını kullanarak selectedFile adlı bir durum değeri ayarlayın. Kullanıcı henüz bir dosya seçmediğinden, selectedFile için başlangıç ​​durumu boş olacaktır.

Ayrıca, bir kullanıcı bir dosya seçtiğinde selectedFile durumunu güncelleyen, handleFileChange adlı bir işleyici işlevi oluşturun. Bir kullanıcı dosyayı yüklediğinde durumu yüklemesi gereken, handleSubmit adlı ikinci bir işlev ekleyin.

içe aktarmak { kullanımDevlet } itibaren"tepki";
işlevDosyaYüklemeFormu() {
sabit [selectedFile, setSelectedFile] = useState(hükümsüz);
sabit handleFileChange = (etkinlik) => {
 setSelectedFile (event.target.files[0]);
 };
sabit işlemeGönder = (etkinlik) => {
 event.preventDefault();
 };
geri dönmek (
 <>


"dosya girişi">Bir dosya seçin:</label>
"dosya" kimlik="dosya girişi" onChange={handleFileChange} />
"göndermek">Yükle</button>
 </form>
 </>
 );
}

Dosya yükleme tamamlandığında, uygulama, aşağıda nasıl yapılacağını öğreneceğiniz giriş alanını temizlemelidir.

Dosya Yüklemesinden Sonra Giriş Alanını Temizleyin

Bu bir metin alanıysa, durumu boş bir dizeye ayarlayarak girişi temizleyebilirsiniz:

setSelectedFile("")

Ancak bu, türünde bir giriş alanıyla çalışmaz. dosya. SelectedField durum değişkenini boş bir dizeye ayarlamak, dosya verilerini DOM'dan değil, yalnızca durumdan kaldırır. Bunun nedeni, bu durumun giriş değerine referans vermemesidir.

Giriş değerini temizlemek için, useRef kancasını kullanarak dosya girişine bir referans oluşturmalısınız. Bu örnekte, React'ten useRef'i içe aktarın ve fileRef adında bir ref nesnesi oluşturun:

içe aktarmak { kullanımDevlet, kullanımRef } itibaren"tepki";
işlevDosyaYüklemeFormu() {
// ...
sabit fileRef = useRef()
geri dönmek (
// ...
 );
}

Ardından, aşağıda gösterildiği gibi giriş alanındaki ref'ye bakın.

"dosya girişi">Bir dosya seçin:</label>
 tür="dosya"
 kimlik="dosya girişi"
 onChange={handleFileChange}
 ref={fileRef}
 />
"göndermek">Yükle</button>
</form>

Tepki ayarlar akım ref değişkeninin özelliğini DOM öğesine ekleyin, bu da dosya değerini şu şekilde alabileceğiniz anlamına gelir:

dosyaRef.current.value

Daha sonra null atayarak bu değeri sıfırlayabilirsiniz.

fileRef.current.value = hükümsüz

Bunu, bunun gibi handleReset adlı bir işlevde kapsülleyin:

sabit tutamaçSıfırlama = () => {
 fileRef.current.value = hükümsüz;
};

Ardından, giriş alanını temizlemek için bir dosyayı başarıyla yüklediğinizde bu işlevi çağırın.

Dosya Yüklemelerinden Sonra Giriş Alanlarını Neden Sıfırlamalısınız?

Başarılı bir dosya yüklemesinden sonra giriş alanını sıfırlamak genellikle iyi bir uygulamadır. Bunun nedeni, kullanıcıya yüklemesinin başarılı olduğuna dair net bir gösterge vermesi ve ayrıca girişi manuel olarak silmek zorunda kalmadan başka bir dosya yükleme fırsatı sağlar alan.