在React上运行后台服务

Question

我正在使用react-dropzone构建文件上传系统。我可以成功上传文件，并在拖放div下面显示文件名和大小。

我一直在尝试尝试使在显示文件后在后台运行拖放区域，但是失败很大。但是我做不到。我知道这是可以做到的，因为这就是Dropbox，Google云端硬盘以及几乎所有其他文件上传网站的工作方式。实现此目标的最佳方法是什么？

到目前为止，我的工作已经完成；

FileUploader容器

onFileUploader = ( files ) => {
    files.forEach(file => {
        this.setState({...this.state, files : this.state.files.concat(file)})

        const jsonFile = new FormData();
        jsonFile.append('file', file)
        jsonFile.append('multichainAddress', this.state.multichainAddress);

        axios({
            method: "POST",
            url: url,
            data: jsonFile,
            dataType: "json",
            cache: false,
            processData: false,
            contentType: false
        })
            .then(response => {
                console.log("post success - ", response);
            })
            .catch(error => {
                console.log("post failed - ", error);
            });
    });

    this.setState({...this.state, filesUploaded : true});
    console.log(this.state.files);
}

render () {
    console.log("[FileUploader] render");

    return (
        <Aux>
            <div>
                <Grid container spacing={8}>
                    <Grid item md={10}>
                        <FileDropzone onDropHandler={this.onFileUploader} dropzoneReference={this.onDropzoneRef}/>
                        <Files files={this.state.files} />
                    </Grid>
                    <Grid item md={2} >
                        <Button
                            variant="outlined"
                            component="span"
                            onClick={() => {
                                this.dropzoneRef.open();
                            }}
                        >
                            Upload
                            <CloudUploadIcon />
                        </Button>
                    </Grid>
                </Grid>
            </div>
        </Aux>
    );
}

FileDropzone组件

render () {
    return (
        <section>
            <div>
                <Dropzone
                    onDrop={this.props.onDropHandler}
                    className={classes.FileDropzone}
                    ref={(node) => {
                        this.props.dropzoneReference(node);
                    }}
                >
                    Drag n drop files here
                </Dropzone>
            </div>
        </section>
    );
}

到目前为止，我已经尝试隐藏该元素，但这似乎也将其禁用。我还尝试过将道具preventDropOnDocument添加到Dropzone组件中，但是什么也没做。