Слушайте, чтобы отменить событие для загрузки файла в firefox

Я хочу удалить выбранный файл для загрузки, если я снова открою селектор файлов и нажму «Отмена». На данный момент это нормально работает в Chrome, но не в Firefox.

            <input
              type='file'
              id='uploadDocument'
              accept = {ACCEPT_TYPES}
              onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
                if (e.currentTarget.files){
                  props.documentChanged(e.currentTarget.files[0])
                }else{
                    props.fileSelectCanceled();
                    console.error('file selection cancelled');
                  }
                }
              }
            />

В идеале, когда e.currentTarget пуст, props.fileSelectCanceled(); очистит текущий файл от состояния. Я просмотрел здесь несколько похожих ответов, но не могу применить ни одного решения.

Вы можете установить выбранный файл в состояние, когда файл выбран. Когда пользователь нажимает на селектор файлов, вы можете установить для выбранного файла значение null с помощью onClick = {e => e.target.value = null}. Обработчик изменений будет похож на onChange = {e => this.setState({ selectedFile: e.target.files[0] })}. Поэтому, когда файл выбран, обработчик onChange будет выполнен, и выбранный файл будет сохранен в состоянии.

Hardik Modha 20.11.2018 10:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
86
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если очищать состояние для каждого onClick, файл будет назначен для состояния только в том случае, если он выбран. Следующий код сработал:

           <input
              type='file'
              id='uploadDocument'
              accept = {ACCEPT_TYPES}
              onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
                  if (e.currentTarget.files){
                    props.documentChanged(e.currentTarget.files[0]);
                  }
                }
              }
              onClick = {() => props.fileSelectCanceled()}
            />

Другие вопросы по теме