Как сбросить ReacJS файл ввода

Question

У меня есть входной файл загрузки:

<input onChange={this.getFile} id="fileUpload" type="file" className="upload"/> 

И справиться загрузить этот путь:

getFile(e) { 
    e.preventDefault(); 
    let reader = new FileReader(); 
    let file = e.target.files[0]; 
    reader.onloadend = (theFile) => { 
     var data = { 
      blob: theFile.target.result, name: file.name, 
      visitorId: this.props.socketio.visitorId 
     }; 
     console.log(this.props.socketio); 
     this.props.socketio.emit('file-upload', data); 
    }; 
    reader.readAsDataURL(file); 
} 

Если я загрузить тот же файл дважды, а затем загрузить событие не увольняют. Как я могу это исправить? Для простого js-кода было достаточно сделать следующее: this.value = null; в обработчике изменений. Как я могу это сделать с помощью ReactJS?

Answer 1

Я думаю, вы можете просто очистить входное значение, как это:

e.target.value = null; 

входного файла не может контролироваться, нет Реагировать конкретный способ сделать это.

Answer 2

То, что сработало для меня была установка атрибута key на вход файл, а затем, когда мне нужно, чтобы сбросить его обновляю ключевое значение атрибута:

functionThatResetsTheFileInput() { 
    let randomString = Math.random().toString(36); 

    this.setState({ 
    theInputKey: randomString 
    }); 
} 

render() { 
    return(
    <div> 
     <input type="file" 
      key={this.state.theInputKey || '' } /> 
     <button onClick={this.functionThatResetsTheFileInput()} /> 
    </div> 
) 
} 

, что силы Реагировать оказывать вход с нуля.

Answer 3

Эта работа для меня - исх = {исх => this.fileInput = исх}

<input id="file_input_file" type="file" onChange={(e) => this._handleFileChange(e)} ref={ref=> this.fileInput = ref} /> 

, то в моем случае, как только файл был загружен на сервер, очистить его с помощью инструкции ниже

this.fileInput.value = "";