我正在使用import * as Dropzone from 'react-dropzone';via npm install react-dropzone --save-dev。去这里了解详情。

默认情况下，此 dropzone 包允许您单击 UI 的 dropzone 以打开文件对话框，供用户选择要上传的文件。

这是我使用的代码，其中包括“选择文件”按钮和“删除”按钮。*注意：multiple={false}禁用用户选择多个文件的能力。您只需将其更改为 true 即可启用多文件选择。

import * as React from 'react';
import * as Dropzone from 'react-dropzone';

export interface FileUploadState { file: Array<File> }

export class FileUpload extends React.Component<{}, FileUploadState> {
    constructor(props: any) {
        super(props);
        this.state = {
            file: []
        }
    }

    onDrop(droppedFile: any) {
        if (droppedFile && droppedFile.preview) {
            window.URL.revokeObjectURL(droppedFile.preview);
        }
        this.setState({
            file: droppedFile
        });
        console.log(droppedFile);
    }

    onDelete() {
        this.setState({
            file: []
        });
    }

    render() {
        let dropzoneRef: any;
        return (
            <div>
                <div>
                    <Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={this.onDrop.bind(this)} multiple={false}>
                        <div className="text-center">Drag and drop your file here, or click here to select file to upload.</div>
                    </Dropzone>
                    <button type="button" className="button primary" onClick={(e) => {
                        e.preventDefault(); // --> without this onClick fires 3 times
                        dropzoneRef.open();
                    }}>
                        Choose File(s)
                    </button>
                    <button type="button" className="button alert" onClick={this.onDelete.bind(this)}>
                        Delete
                    </button>
                </div>
                <hr />
                <div>
                    <h2>File(s) to be uploaded: {this.state.file.length} </h2>
                    <ul>
                        {
                            this.state.file.map(f => <li><code>{f.name}</code></li>)
                        }
                    </ul>
                </div>
            </div>

        )
    }
}

对于仍在寻找的任何人，看起来库已更新以公开open函数。

https://github.com/react-dropzone/react-dropzone/commit/773eb660c7848dd1d67e6e13c7f7261eaaa9fd4d

您可以通过 refs 以这种方式使用它：

dropzoneRef: any;

onClickPickImage = () => {
  if (this.dropzoneRef) {
    this.dropzoneRef.open();
  }
};

// When rendering your component, save a ref

<Dropzone
  ref={(ref: any) => {
    this.dropzoneRef = ref;
  }}
  onDrop={this.onDrop}
>
  <div onClick={this.onClickPickImage}>Trigger manually</div>
</Dropzone>

像这样尝试。这对我有用

triggerUploadDialog () {
    this.photoUploadDropAreaElement.dropzone.element.click()
  }

零件

<div onClick={this.triggerUploadDialog.bind(this)}>
 <DropzoneComponent ref={dropArea => this.photoUploadDropAreaElement = dropArea} />
</div>

我的问题不包括input元素。当我这样做时，它起作用了。