时间戳

首页 > 解决方案 > 文件上传后如何清除 React Dropzone 组件中的 Dropzone？

reactjs - 文件上传后如何清除 React Dropzone 组件中的 Dropzone？

问题描述

我需要在文件上传后销毁 dropzone 组件，无法让 dropzone 对象应用 dropzone.destroy() 方法。

标签： reactjsreact-dropzone

解决方案

要清除 dropzone，我们需要获取 dropzone 对象并使用 dropzone.destroy() 方法。我们需要首先在整个组件之外初始化一个变量，如下所示：

var myDropzone;

要获取 dropzone 对象，我们需要使用 dropzone 的 init 事件，它为我们提供了 dropzone 对象，如下所示：

initCallback (dropzone) {
        myDropzone = dropzone;
        console.log("dropzone"+myDropzone);
    }
const eventHandlers = {
            addedfile: this.onDrop.bind(this),
            removedfile: this.removeFile.bind(this),
            init: this.initCallback.bind(this)
    }

然后我们可以在上传完成后调用 dropzone.destroy() 方法，如下所示：

myDropzone.destroy();

它会将我们的文件数组重置为 [] 并从视图中删除文件。

推荐阅读