javascript - 触发器与 ref react dropzone 不起作用

Question

我正在实现这个库:https://github.com/felixrieseberg/React-Dropzone-Component

要以编程方式触发另一个组件或元素，我可以使用 ref，但我收到错误消息:photoUploadDropAreaElement is not a function using below code。

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>

        )
    }
}