当前位置: 首页 > 面试题库 >

如何重置ReactJS文件输入

咸皓
2023-03-14
问题内容

我有文件上传输入:

<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?


问题答案:

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

e.target.value = null;

文件输入无法控制,没有React特定的方式来实现。



 类似资料:
  • 当对输入字段使用默认值时,如何绕过带有道具状态的反模式? 在呈现窗体时,它应该包含一些默认值。当我设置一些值并关闭表单,然后重新打开表单时,我希望显示默认值,而不是以前输入的值······ 但是当我让state从道具继承值时,道具就永远改变了。我还没找到绕过这个的方法。

  • 我试图理解是否有可能在ReactJS上使用类似Java Spring概要文件的概要文件。我的意思是,如果我为许多不同的客户开发了一个仪表板,并希望为所有客户提供核心代码,并且根据其中一个客户的要求,只为他添加他想要的部分(只有他会看到)。在ReactJS上有可能实现这一点吗?

  • 问题内容: 我想重新打开一个文件。我在输入流中有一个文件。我尝试使用Scanner和BufferedReader。但是使用close()方法关闭文件后,我无法再次打开该文件。请帮助如何再次打开文件。我写了下面的代码: 问题答案: 流,读取器,写入器,套接字或任何其他资源关闭后,您将无法再次打开它。 如果要多次读取文件,则需要具有文件名。

  • 我第一个反应项目的第一个问题。 我试图找出如何在特定的onClick链接上对组件产生最佳效果,以便能够重新触发此效果,而不受页面上其他链接的影响。前两个问题是有效的,但我似乎没有其他链接不影响组件。 我有一个DisplayLightbox组件在我的页面上接受几个值 我想要触发lightbox的链接正在调用一个设置状态(并发送道具)的函数。这部分似乎很好用。 在我的DisplayLightbox组件

  • 问题内容: 注意: 以下答案与评论反映了2009年旧版浏览器的状态。现在,您实际上可以在2017年使用JavaScript和dataTransfer或FileList对象动态/以编程方式设置文件输入元素的值。 有关详细信息和演示,请参见此问题的答案: 如何以编程方式设置文件输入值(即:拖放文件时)? 如何设置此值? 问题答案: 由于安全原因,您不能。 想像: 您不希望所访问的网站能够做到这一点,对

  • 问题内容: 例如:codepen 问题答案: : :