Как useRef Hook на React може да ви помогне да нулирате поле за въвеждане след успешно качване

Използвайки React, може да ви се стори по-неудобно да нулирате някои полета за въвеждане, отколкото други. По-специално въвеждането на файлове може да бъде проблематично, но това са точните полета, които ще искате да нулирате след успешно качване на файл.

За щастие, куката useRef предоставя просто решение. Научете как можете да изчистите поле за въвеждане на файл с куката useRef след успешно качване.

Създаване на прост формуляр за качване

За да демонстрирате как да нулирате поле за въвеждане на файл с useRef, ще създайте проста форма на React с поле за въвеждане, което приема изображение.

Първо, настройте стойност на състояние, наречена selectedFile, като използвате куката useState, за да проследите избрания файл. Първоначалното състояние за selectedFile ще бъде null, тъй като потребителят все още не е избрал файл.

Също така създайте манипулираща функция, наречена handleFileChange, която актуализира състоянието на selectedFile, когато потребителят избере файл. Добавете втора функция, наречена handleSubmit, която трябва да качи състоянието, когато потребителят качи файла.

импортиране {useState} от"реагира";
функцияFileUploadForm() {
конст [selectedFile, setSelectedFile] = useState(нула);
конст handleFileChange = (събитие) => {
 setSelectedFile (event.target.files[0]);
 };
конст handleSubmit = (събитие) => {
 event.preventDefault();
 };
връщане (
 <>


"fileInput">Изберете файл:</label>
"файл" id="fileInput" onChange={handleFileChange} />
"Изпращане">Качване</button>
 </form>
 </>
 );
}

Когато качването на файла приключи, приложението трябва да изчисти полето за въвеждане, което ще научите как да направите по-долу.

Изчистете полето за въвеждане след качване на файл

Ако това беше текстово поле, можете да изчистите въведеното, като зададете състоянието на празен низ:

setSelectedFile("")

Но това няма да работи с поле за въвеждане на тип файл. Задаването на променливата за състояние selectedField на празен низ премахва само файловите данни от състоянието, но не и от DOM. Това е така, защото това състояние не препраща към входната стойност.

За да изчистите входната стойност, трябва да създадете препратка към входния файл с помощта на куката useRef. В този пример импортирайте useRef от React и създайте реф обект, наречен fileRef:

импортиране {useState, useRef} от"реагира";
функцияFileUploadForm() {
// ...
конст fileRef = useRef()
връщане (
// ...
 );
}

След това посочете реф. в полето за въвеждане, както е показано по-долу.

"fileInput">Изберете файл:</label>
 тип="файл"
 id="fileInput"
 onChange={handleFileChange}
 ref={fileRef}
 />
"Изпращане">Качване</button>
</form>

React задава текущ свойство на променливата ref към DOM елемента, което означава, че можете да получите стойността на файла по следния начин:

fileRef.current.value

След това можете да нулирате тази стойност, като й присвоите null.

fileRef.current.value = нула

Капсулирайте това във функция с име handleReset по следния начин:

конст handleReset = () => {
 fileRef.current.value = нула;
};

След това извикайте тази функция, когато успешно качите файл, за да изчистите полето за въвеждане.

Защо трябва да нулирате полетата за въвеждане след качване на файлове

Като цяло е добра практика да нулирате полето за въвеждане след успешно качване на файл. Това е така, защото дава на потребителя ясна индикация, че тяхното качване е било успешно и също им дава възможност да качат друг файл, без да се налага ръчно да изчистват въведеното поле.