Question

我正在实施此库：https://github.com/felixrieseberg/React-Dropzone-Component

要以编程方式触发另一个组件或元素，我可以使用ref，但我收到的错误photoUploadDropAreaElement不是使用以下代码的函数。

triggerUploadDialog(){
    this.photoUploadDropAreaElement.click(); // doesn't work?

    console.log(this.photoUploadDropAreaElement);
}

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

DropzoneComponent的结果如下所示

这里有什么问题？我只是想触发一次点击打开文件对话框，供用户选择要上传的文件。

Answer 1

我通过import * as Dropzone from 'react-dropzone';使用npm install react-dropzone --save-dev。转到here了解详细信息。

默认情况下，此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>

        )
    }
}

Answer 2

试试这样。这对我有用

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

组件

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

Answer 3

对于仍在寻找的任何人，似乎该库已更新为公开了open函数。

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

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

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>

Answer 4

我的问题是否，其中包括input元素。当我这样做的时候，它起作用了。

触发反应dropzone与ref不起作用

4 个答案: