Kā reaģēt Ref Hook var palīdzēt atiestatīt ievades lauku pēc veiksmīgas augšupielādes

Izmantojot React, dažus ievades laukus atiestatīt var būt neērti nekā citus. Jo īpaši failu ievade var būt problemātiska, taču tie ir tieši tie lauki, kurus vēlaties atiestatīt pēc veiksmīgas faila augšupielādes.

Par laimi, useRef āķis nodrošina vienkāršu risinājumu. Uzziniet, kā pēc veiksmīgas augšupielādes varat notīrīt faila ievades lauku, izmantojot āķi useRef.

Vienkāršas augšupielādes veidlapas izveide

Lai parādītu, kā atiestatīt faila ievades lauku, izmantojot useRef, jums būs jāveic izveidot vienkāršu React formu ar ievades lauku, kas pieņem attēlu.

Vispirms iestatiet stāvokļa vērtību ar nosaukumu selectedFile, izmantojot āķi useState, lai izsekotu atlasītajam failam. Sākotnējais statuss atlasītajam failam būs nulle, jo lietotājs vēl nav atlasījis failu.

Tāpat izveidojiet apdarinātāja funkciju, ko sauc par handleFileChange, kas atjaunina atlasītā faila stāvokli, kad lietotājs atlasa failu. Pievienojiet otru funkciju handleSubmit, kurai ir jāaugšupielādē statuss, kad lietotājs augšupielādē failu.

imports { useState } no"reaģēt";
funkcijuFileUploadForm() {
konst [selectedFile, setSelectedFile] = useState(null);
konst handleFileChange = (notikumu) => {
 setSelectedFile (event.target.files[0]);
 };
konst HandSubmit = (notikumu) => {
 event.preventDefault();
 };
atgriezties (
 <>


"faila ievade">Izvēlieties failu:</label>
"fails" id="faila ievade" onChange={handleFileChange} />
"Iesniegt">Augšupielādēt</button>
 </form>
 </>
 );
}

Kad faila augšupielāde ir pabeigta, lietojumprogrammai ir jānotīra ievades lauks, kā to izdarīt tālāk.

Pēc faila augšupielādes notīriet ievades lauku

Ja tas bija teksta lauks, varat notīrīt ievadi, iestatot stāvokli uz tukšu virkni:

setSelectedFile("")

Bet tas nedarbosies ar ievades lauku failu. Iestatot atlasīto lauka stāvokļa mainīgo uz tukšu virkni, faila dati tiek noņemti tikai no stāvokļa, nevis no DOM. Tas ir tāpēc, ka šis stāvoklis neatsaucas uz ievades vērtību.

Lai notīrītu ievades vērtību, ir jāizveido atsauce uz faila ievadi, izmantojot āķi useRef. Šajā piemērā importējiet useRef no React un izveidojiet ref objektu ar nosaukumu fileRef:

imports { useState, useRef } no"reaģēt";
funkcijuFileUploadForm() {
// ...
konst fileRef = useRef()
atgriezties (
// ...
 );
}

Pēc tam ievades laukā atsaucieties uz atsauci, kā parādīts zemāk.

"faila ievade">Izvēlieties failu:</label>
 tips="fails"
 id="faila ievade"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Iesniegt">Augšupielādēt</button>
</form>

React nosaka strāva DOM elementa ref mainīgā īpašība, kas nozīmē, ka varat iegūt faila vērtību šādi:

fileRef.current.value

Pēc tam varat atiestatīt šo vērtību, piešķirot tai nulli.

fileRef.current.value = null

Iekapsulējiet to funkcijā handleReset šādi:

konst handReset = () => {
 fileRef.current.value = null;
};

Kad esat veiksmīgi augšupielādējis failu, izsauciet šo funkciju, lai notīrītu ievades lauku.

Kāpēc jums vajadzētu atiestatīt ievades laukus pēc failu augšupielādes

Parasti pēc veiksmīgas faila augšupielādes ieteicams atiestatīt ievades lauku. Tas ir tāpēc, ka tas sniedz lietotājam skaidru norādi, ka augšupielāde bija veiksmīga un arī nodrošina viņiem iespēju augšupielādēt citu failu, manuāli nedzēšot ievadi lauks.