Как хук useRef в React может помочь вам сбросить поле ввода после успешной загрузки

Используя React, вам может показаться более неудобным сбрасывать одни поля ввода, чем другие. В частности, ввод файлов может быть проблематичным, но это именно те поля, которые вы захотите сбросить после успешной загрузки файла.

К счастью, хук useRef предоставляет простое решение. Узнайте, как очистить поле ввода файла с помощью хука useRef после успешной загрузки.

Создание простой формы загрузки

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

Во-первых, установите значение состояния с именем selectedFile, используя хук useState для отслеживания выбранного файла. Начальное состояние для selectedFile будет нулевым, так как пользователь еще не выбрал файл.

Кроме того, создайте функцию-обработчик с именем handleFileChange, которая обновляет состояние selectedFile, когда пользователь выбирает файл. Добавьте вторую функцию с именем handleSubmit, которая должна загружать состояние, когда пользователь загружает файл.

Импортировать { состояние использования } от"реагировать";
функцияФайлЗагрузитьФорму() {
константа [выбранный файл, setSelectedFile] = useState (нулевой);
константа дескриптор изменения файла = (событие) => {
 setSelectedFile (event.target.files[0]);
 };
константа обработатьОтправить = (событие) => {
 событие.preventDefault();
 };
возвращаться (
 <>


"ввод файла">Выберите файл:</label>
"файл" идентификатор ="ввод файла" onChange={handleFileChange} />
"представлять на рассмотрение">Загрузить</button>
 </form>
 </>
 );
}

Когда загрузка файла будет завершена, приложение должно очистить поле ввода, что вы узнаете, как это сделать ниже.

Очистить поле ввода после загрузки файла

Если бы это было текстовое поле, вы могли бы очистить ввод, установив состояние в пустую строку:

установитьВыбранныйФайл("")

Но это не будет работать с полем ввода типа файл. Установка переменной состояния selectedField в пустую строку удаляет данные файла только из состояния, а не из DOM. Это связано с тем, что это состояние не ссылается на входное значение.

Чтобы очистить входное значение, вы должны создать ссылку на входной файл с помощью хука useRef. В этом примере импортируйте useRef из React и создайте объект ref с именем fileRef:

Импортировать { useState, useRef } от"реагировать";
функцияФайлЗагрузитьФорму() {
// ...
константа fileRef = использоватьRef()
возвращаться (
// ...
 );
}

Затем укажите ссылку в поле ввода, как показано ниже.

"ввод файла">Выберите файл:</label>
 тип="файл"
 идентификатор ="ввод файла"
 onChange={handleFileChange}
 ссылка = {fileRef}
 />
"представлять на рассмотрение">Загрузить</button>
</form>

React устанавливает текущий свойство переменной ref к элементу DOM, что означает, что вы можете получить значение файла следующим образом:

fileRef.current.value

Затем вы можете сбросить это значение, присвоив ему null.

fileRef.current.value = нулевой

Инкапсулируйте это в функцию с именем handleReset следующим образом:

константа дескрипторReset = () => {
 fileRef.current.value = нулевой;
};

Затем вызовите эту функцию, когда вы успешно загрузите файл, чтобы очистить поле ввода.

Почему вы должны сбросить поля ввода после загрузки файла

Обычно рекомендуется сбрасывать поле ввода после успешной загрузки файла. Это связано с тем, что это дает пользователю четкое указание на то, что их загрузка прошла успешно, а также предоставляет им возможность загрузить другой файл без необходимости вручную очищать ввод поле.