Kuinka reagoida Ref Hookin käyttö voi auttaa sinua nollaamaan syöttökentän onnistuneen latauksen jälkeen

Reactia käytettäessä joidenkin syöttökenttien nollaaminen voi olla hankalampaa kuin toisten. Erityisesti tiedostojen syöttäminen voi olla ongelmallista, mutta nämä ovat tarkat kentät, jotka haluat nollata onnistuneen tiedoston latauksen jälkeen.

Onneksi useRef-koukku tarjoaa yksinkertaisen ratkaisun. Opi tyhjentämään tiedostojen syöttökenttä useRef-koukun avulla onnistuneen latauksen jälkeen.

Yksinkertaisen latauslomakkeen luominen

Osoittaaksesi, kuinka tiedoston syöttökenttä nollataan useRefillä, sinun on Luo yksinkertainen React-lomake syöttökentällä, joka hyväksyy kuvan.

Aseta ensin tila-arvo nimeltä selectedFile käyttämällä useState-koukkua valitun tiedoston seuraamiseen. Valitun tiedoston alkutila on tyhjä, koska käyttäjä ei ole vielä valinnut tiedostoa.

Luo myös käsittelijätoiminto nimeltä handleFileChange, joka päivittää valitun tiedoston tilan, kun käyttäjä valitsee tiedoston. Lisää toinen toiminto nimeltä handleSubmit, jonka pitäisi lähettää tila, kun käyttäjä lataa tiedoston.

tuonti { useState } alkaen"reagoi";
toimintoFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(tyhjä);
konst handleFileChange = (tapahtuma) => {
 setSelectedFile (tapahtuma.target.files[0]);
 };
konst handleSubmit = (tapahtuma) => {
 event.preventDefault();
 };
palata (
 <>


"fileInput">Valitse tiedosto:</label>
"tiedosto" id="fileInput" onChange={handleFileChange} />
"Lähetä">Lataa</button>
 </form>
 </>
 );
}

Kun tiedoston lataus on valmis, sovelluksen tulee tyhjentää syöttökenttä, minkä ohjeet tehdään alla.

Tyhjennä syöttökenttä tiedoston latauksen jälkeen

Jos tämä oli tekstikenttä, voit tyhjentää syötteen asettamalla tilan tyhjäksi merkkijonoksi:

setSelectedFile("")

Mutta tämä ei toimi tyypin syöttökentän kanssa tiedosto. Valitun kentän tilamuuttujan asettaminen tyhjäksi merkkijonoksi poistaa vain tiedostotiedot tilasta, ei DOM: sta. Tämä johtuu siitä, että tämä tila ei viittaa syöttöarvoon.

Jos haluat tyhjentää syöttöarvon, sinun on luotava viittaus tiedostosyötteeseen useRef-koukun avulla. Tässä esimerkissä tuo useRef Reactista ja luo ref-objekti nimeltä fileRef:

tuonti { useState, useRef } alkaen"reagoi";
toimintoFileUploadForm() {
// ...
konst fileRef = useRef()
palata (
// ...
 );
}

Viittaa sitten viitteeseen syöttökentässä alla olevan kuvan mukaisesti.

"fileInput">Valitse tiedosto:</label>
 tyyppi="tiedosto"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Lähetä">Lataa</button>
</form>

React asettaa nykyinen DOM-elementin ref-muuttujan ominaisuus, mikä tarkoittaa, että voit saada tiedoston arvon seuraavasti:

fileRef.current.value

Voit sitten nollata tämän arvon määrittämällä sille nollan.

fileRef.current.value = tyhjä

Kapseloi tämä funktioon nimeltä handleReset näin:

konst HandReset = () => {
 fileRef.current.value = tyhjä;
};

Kutsu sitten tämä toiminto, kun lataat tiedoston onnistuneesti tyhjentääksesi syöttökentän.

Miksi sinun pitäisi nollata syöttökentät tiedostojen lataamisen jälkeen

Yleensä on hyvä käytäntö nollata syöttökenttä onnistuneen tiedoston latauksen jälkeen. Tämä johtuu siitä, että se antaa käyttäjälle selkeän osoituksen, että latauksensa onnistui ja myös tarjoaa heille mahdollisuuden ladata toinen tiedosto ilman manuaalista syötettä ala.