Как разрешить input type = file выбрать один и тот же файл в компоненте реакции

У меня есть компонент реакции, который отображает <input type="file"> dom, чтобы пользователь мог выбирать изображения из браузера. Я обнаружил, что его метод onChange не вызывается, когда я выбираю один и тот же файл. После некоторого поиска кто-то предлагает использовать this.value=null или return false в конце метода onChange, но я пробовал, что он не работает.

Ниже мой код:

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { this.readFile(event) }}/>

Ниже я попытался:

<input id="upload" ref="upload" type="file" accept="image/*"
               onChange={(event)=> { 
                   this.readFile(event) 
                   return false
              }}/>

Еще один:

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
               this.value=null
          }}/>

Я считаю, что выше решения работают для jquery, но я не знаю, как позволить ему работать в реакциях.

Ответ 1

Dup этой темы

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
          }}
        onClick={(event)=> { 
               event.target.value = null
          }}

/>

Ответ 2

Я думаю, что this в вашей функции не относится к полю input. Вместо этого попробуйте использовать event.target.

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
               event.target.value=null
          }}/>

Ответ 3

Моя версия React: 16.2.0

Решение @jbsmoove работает отлично для всех браузеров, кроме IE11.

Что касается IE11, то в случае, если мы откроем какой-то файл, и во второй раз мы нажмем Cancel insteed of Open file, он показывает пустой экран и в консоли мы видим:

Не удалось получить имя свойства "неопределенной или нулевой ссылки"

Итак, я придумал другое решение, которое прекрасно работает даже в IE11:

<input id="upload" ref="upload" type="file" accept="image/*"
      onInput={(event)=> { 
           this.readFile(event) 
      }}
      onClick={(event)=> { 
           event.target.value = null
      }}
/>

Просто используйте onInput вместо onChange.

Ответ 4

Используйте запасной метод "Нажми и нажми", чтобы выбрать то же изображение. Пример:

  <input
    id="upload" 
    ref="upload" 
    type="file" 
    accept="image/*"       
    multiple="false"
    onChange={(e) => this.getDailyImage(e)}
    onClick={(e) => e.target.files[0] && this.getDailyImage(e)}
  />

Ответ 5

У меня на самом деле сработало: событие.currentTarget.value = null

    onClick={(event)=> { 
               event.currentTarget.value = null
          }}