如何重置ReacJS文件输入

我有文件上传输入：如何重置ReacJS文件输入

<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来做到这一点？

来源

2017-02-12 Stepan Yakovenko

'的onChange = {this.getFile.bind（这）}'或的GetFile =（E）=> { –

我想你可以清除这样的输入值：

e.target.value = null;

文件输入无法控制，也没有作出反应的具体办法做到这一点。

来源

2017-02-12 20:14:51 Freez

真棒... :)它救了我的 –

什么工作对我来说是一个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> 
) 
}

这就使得反应从头再次渲染输入。

来源

2017-08-23 17:44:24

一天要解释这是如何工作的，你需要更新当你想切割输入时，使用this.state.theInputKey。在引擎盖下，更改关键原因会对重新渲染输入做出反应，从而将其清除。 –

这项工作对我来说 - REF = {REF => this.fileInput = REF}

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

然后在我的情况下，一旦文件被上传到服务器上，我使用下面

语句清除

this.fileInput.value = "";

来源

2017-10-06 02:05:51 Jozcar

如何重置ReacJS文件输入

回答

相关问题