如何重置 ReactJS 文件输入

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

原文由 Stepan Yakovenko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您可以像这样清除输入值：

 e.target.value = null;

文件输入无法控制，没有 React 特定的方法可以做到这一点。

---

编辑 对于旧浏览器 (以下技术之一。

请参阅 http://jsbin.com/zurudemuma/1/edit?js,output （在 IE10 和 9 上测试）

原文由 Freez 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>
  )
}

这迫使 React 从头开始重新渲染输入。

原文由 Tonatiuh 发布，翻译遵循 CC BY-SA 3.0 许可协议