Jak zezwolić na typ wejściowy = plik, aby wybrać ten sam plik w komponencie reagowania

Question

Mam komponent reagujący, który renderuje domena <input type="file">, aby umożliwić użytkownikowi wybieranie obrazów z przeglądarki. Zauważyłem, że jego metoda onChange nie została wywołana, gdy wybieram ten sam plik. Po pewnym przeszukaniu ktoś sugeruje użycie this.value=null lub na końcu metody onChange, ale próbowałem, że to nie działa.

Poniżej jest mój kod:

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

Poniżej jest co starałem:

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

Kolejnym jest:

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

wierzę powyższe rozwiązania pracować dla jQuery ale don wiesz, jak to zrobić w reaktjach.

Answer 1

Myślę, że this w swojej funkcji nie odnosi się do pola input. Zamiast tego spróbuj użyć event.target.

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

Answer 2

Dup z this thread

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

/> 

Answer 3

Moja React Wersja: 16.2.0

@jbsmoove rozwiązanie działa poprawnie na wszystkich przeglądarkach z wyjątkiem IE11.

Jak dla IE11, w przypadku, gdy otworzymy jakiś plik i raz drugi przycisk Anuluj insteed Open pliku pokazuje pusty ekran w konsoli widzimy:

Nie można uzyskać właściwość „name” z niezdefiniowane lub wartość null odniesienia

Więc mam wymyślić inne rozwiązanie, które działa idealnie nawet w IE11:

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

wystarczy użyć onInput zamiast onChange.