提交reactjs后如何清空dropzone答案

【问题标题】：How to empty the dropzone after submit reactjs提交reactjs后如何清空dropzone
【发布时间】：2017-07-19 06:31:41
【问题描述】：

我想知道如何在 dropzone 上的文件已经保存在服务器和数据库中后清空它。我的问题是当我提交它时维护dropzone上的文件，甚至关闭模式，我希望我可以提供一个关于清空dropzone的代码，但我不知道所以我会留下dropzone的代码并提交下面。

onsubmit 的代码

onSubmit() {
        debugger
        form.Status=0;
        form.isActive=true;
        return(form.Key > 0 ? this.creater : this.creater).call(this, form);
        return false;
}

ondrop 的代码

onDrop(acceptedFiles, e) {
        debugger
        console.log('Received files: ', acceptedFiles);
        this.setState({files: acceptedFiles});      
        const req = request.post('http://localhost:8933/api/upload/post');
        acceptedFiles.forEach(file => {
            req.attach(thisUuid , file);
        });
         req.end(callback);
    }

我的问题是提交时没有刷新 renderImage 文件

renderImg(file, index) {
    debugger
        let ext = file.name.split(".").slice(-1)[0];
        if(ext === "PNG" ||ext === "png" || ext === "jpg") {    
            return (<div> <i className="fa fa-file-image-o" ></i>{file.name}</div>)
        }
        if(ext === "doc" || ext === "docx") {
            return (<div> <i className="fa fa-file-word-o"></i>{file.name}</div>)
        }
        if(ext === "pdf" || ext === "pdf") {
            return (<div> <i className="fa fa-file-pdf-o"></i> {file.name}</div>)
        }
        if(ext === "xlsx" || ext === "xls") {
            return (<div> <i className="fa fa-file-excel-o"></i> {file.name}</div>)
        }       

        return (
            <div key={index} className="pms-file-preview drop-box">
                <div className="pms-file-footer">
                    <div className="pms-file-caption drop-caption" title={file.name}>
                        {file.name}

                    </div>
                </div>
            </div>
        )
        return false;
    }

最后是放置区

<Dropzone  
                        accept = ".pdf,.doc,.docx,.odt,.jpg,.png,.xls,.xlsx"
                        onDrop={this.onDrop.bind(this)}
                        className="pms-upload">
                        {this.state.files.length > 0 ? 
                            <div>{this.state.files.map(this.renderImg)}</div> : 
                            <div className="pms-upload-title">
                                Click or drag & drop files here
                             </div>
                        }
                    </Dropzone>

【问题讨论】：

this.setState({files: null}) 当您需要清空文件时
@Fawaz 我应该把它放在哪里？提交？请帮帮我，我很困惑..
是的，放在onSubmit里面
@Fawaz 谢谢它的工作，但我把它改为 files:[] 而不是 null
很高兴它有帮助！

标签： javascript ajax reactjs react-dropzone

【解决方案1】：

要清空 droppe 项目，您应该使用 set state 将文件再次清空

  onSubmit() {
            debugger
            form.Status=0;
            form.isActive=true;
            this.setState({files: []})
            return(form.Key > 0 ? this.creater : this.creater).call(this, form);
            return false;
    }

【讨论】：