Како Реацт-ова употребаРеф Хоок може да вам помогне да ресетујете поље за унос након успешног отпремања

Користећи Реацт, можда ће вам бити незгодније ресетовати нека поља за унос од других. Конкретно, унос датотека може бити проблематичан, али ово су тачна поља која ћете желети да ресетујете након успешног отпремања датотеке.

Срећом, усеРеф кука пружа једноставно решење. Научите како можете да обришете поље за унос датотеке помоћу куке усеРеф након успешног отпремања.

Прављење једноставног обрасца за отпремање

Да бисте демонстрирали како да ресетујете поље за унос датотеке помоћу усеРеф-а, ви ћете креирајте једноставан Реацт образац са пољем за унос које прихвата слику.

Прво, подесите вредност стања под називом селецтедФиле користећи закачицу усеСтате за праћење изабране датотеке. Почетно стање за селецтедФиле биће нулл пошто корисник још није изабрао датотеку.

Такође, креирајте функцију руковања под називом хандлеФилеЦханге која ажурира стање изабране датотеке када корисник одабере датотеку. Додајте другу функцију под називом хандлеСубмит, која треба да отпреми стање када корисник отпреми датотеку.

увоз { усеСтате } из"реаговати";
функцијаФилеУплоадФорм() {
конст [селецтедФиле, сетСелецтедФиле] = усеСтате(нула);
конст хандлеФилеЦханге = (догађај) => {
 сетСелецтедФиле (евент.таргет.филес[0]);
 };
конст хандлеСубмит = (догађај) => {
 евент.превентДефаулт();
 };
повратак (
 <>


"филеИнпут">Изаберите датотеку:</label>
"фајл" ид="филеИнпут" онЦханге={хандлеФилеЦханге} />
"прихвати">Учитај</button>
 </form>
 </>
 );
}

Када се отпремање датотеке заврши, апликација треба да обрише поље за унос, што ћете научити како да урадите у наставку.

Обришите поље за унос након отпремања датотеке

Ако је ово поље за текст, можете да обришете унос постављањем стања на празан стринг:

сетСелецтедФиле("")

Али ово неће радити са пољем за унос типа фајл. Постављање променљиве стања селецтедФиелд на празан стринг само уклања податке датотеке из стања, а не из ДОМ-а. То је зато што ово стање не упућује на улазну вредност.

Да бисте обрисали улазну вредност, морате да креирате референцу на унос датотеке помоћу куке усеРеф. У овом примеру, увезите усеРеф из Реацт-а и креирајте реф објекат под називом филеРеф:

увоз { усеСтате, усеРеф } из"реаговати";
функцијаФилеУплоадФорм() {
// ...
конст филеРеф = усеРеф()
повратак (
// ...
 );
}

Затим референцирајте реф у пољу за унос као што је приказано испод.

"филеИнпут">Изаберите датотеку:</label>
 типе="фајл"
 ид="филеИнпут"
 онЦханге={хандлеФилеЦханге}
 реф={филеРеф}
 />
"прихвати">Учитај</button>
</form>

Реацт поставља Тренутни својство реф променљиве за ДОМ елемент што значи да можете добити вредност датотеке овако:

филеРеф.цуррент.валуе

Затим можете ресетовати ову вредност тако што ћете јој доделити нулл.

филеРеф.цуррент.валуе = нула

Инкапсулирајте ово у функцију под називом хандлеРесет овако:

конст хандлеРесет = () => {
 филеРеф.цуррент.валуе = нула;
};

Затим позовите ову функцију када успешно отпремите датотеку да бисте обрисали поље за унос.

Зашто би требало да ресетујете поља за унос након отпремања датотека

Генерално је добра пракса да ресетујете поље за унос након успешног отпремања датотеке. То је зато што кориснику даје јасну индикацију да је њихово отпремање било успешно и такође пружа им могућност да отпреме другу датотеку без потребе да ручно бришу унос поље.