如何重置 ReactJS 文件输入

IT技术 html reactjs file-upload
2021-04-06 00:11:55

我有文件上传输入：

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

6个回答

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

e.target.value = null;

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

编辑对于旧浏览器 (<IE11)，您可以使用以下技术之一。

见http://jsbin.com/zurudemuma/1/edit?js，输出（在 IE10 和 9 上测试）

注意：undefinedChrome 79 中的设置会触发此错误：Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.. 但null不会触发错误。
2021-05-27 00:11:55
出于某种原因，我认为我看到的东西那里说= null没有工作的IE11，但你说得对，它确实在IE11。所以在人们真正需要支持的任何事情上都近乎普遍（现在）。
2021-06-07 00:11:55
太棒了... :) 它拯救了我的一天
2021-06-08 00:11:55
谢谢@TJCrowder，我更新了我的答案。即使大多数网站停止支持这些浏览器，它们仍然存在:)
2021-06-14 00:11:55
当心浏览器不兼容：stackoverflow.com/questions/1703228/...
2021-06-18 00:11:55

对我有用的是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 从头开始​​再次渲染输入。

这对我尝试重新呈现 react-csv-reader（不是输入标签）来解决同样的问题很有用。谢谢。
2021-05-23 00:11:55
像魅力一样工作。我用了key={Date.now()}
2021-06-02 00:11:55
我喜欢这个主意。然后我可以从其他功能控制输入字段，这正是我现在需要的。它工作正常。谢谢。
2021-06-03 00:11:55
为了解释这是如何工作的，您需要在想要清除输入时更新 this.state.theInputKey。在引擎盖下，更改键会导致重新渲染输入从而清除它。
2021-06-05 00:11:55
我喜欢的方式，但是我想从使这个getDerivedStateFromProps了，幸好它的工作原理有作为，因为我们仍然有机会获得state。:)
2021-06-16 00:11:55

这对我有用 - 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 = "";
我喜欢这种方法，但是我想从中制作它getDerivedStateFromProps，不幸的是它不起作用，因为我们无法访问this那里。
2021-05-29 00:11:55

我通过key在我的文件输入中更新来做到这一点。这将强制重新渲染，之前选择的文件将消失。

<input type="file" key={this.state.inputKey} />

更改状态inputKey将重新渲染组件。更改inputKeywill 的一种方法是始终将其设置为Date.now()单击应该清除该字段的按钮。

当您不想在单击按钮时清除该字段，但您想在上传任何其他文件之前确保该字段为空时，这很有效。
2021-05-31 00:11:55
这真的很好用。还可以轻松地向用户提供一些自定义反馈。例如：我有一个状态变量作为键（使用Date.now()，并使用另一个状态变量 - 与此一起设置 - 向用户提供消息，例如“在（时间）成功上传”。
2021-06-18 00:11:55

每次点击onClick都可以重置输入，这样即使是同一个文件onChange也会被触发。

<input onChange={this.onChange} onClick={e => (e.target.value = null)} type="file" />
非常好的解决方案
2021-06-02 00:11:55
其它你可能感兴趣的问题
上一篇如何在 React 中使用带有钩子的生命周期方法？ 下一篇如何将多个参数传递给输入的 onChange 处理程序