将文件上传状态从react dropzone组件发送给父级？

Question

我试图使用支持和回调(如这教程中所解释的)将上传的文件的状态发送回父组件。

我的文件上传由反应滴区组件处理。

以下是我的组件：

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            doneUploading: false,
        };
    }

    dataFromFileDrop = (fileData) => {
        this.setState({
            doneUploading: fileData.doneUploading,
        });
    };

    render() {
        return (
            <div className="App">
                <FileDrop dataFromFileFrop={this.dataFromFileDrop}/>
                { this.state.doneUploading ?  'Done uploading.' : 'Upload a video.' }
            </div>
        );
    }
}

FileDrop.js

class FileDrop extends Component {
    constructor(props) {
        super(props);
        this.state = { files: [] };
    }

    onDrop = (files) => {
        this.setState({
            files
        });

        // process file

        // send upload status to parent component
        const fileData = {
            doneUploading: true
        };

        this.props.dataFromFileDrop(fileData); // ERROR
    };

    render() {
        return (
            <div className="FileDrop">
                <Dropzone onDrop={this.onDrop.bind(this)}>
                  Upload video!
                </Dropzone>
            </div>
        );
    };
}

当我运行这个应用程序并将一个文件放到下拉列表区域时，我会看到一个错误：this.props.dataFromFileDrop不是一个函数。我能知道我在哪里犯错误吗？

发生错误是因为我没有将dataFromFileDrop作为道具传递给Dropzone组件吗？

将其添加到FileDrop中的构造函数中没有帮助：

this.props.dataFromFileDrop.bind(this);

Answer 1

函数名FileDrop错误-文件Frop

//Replace
<FileDrop dataFromFileFrop={this.dataFromFileDrop}/>
//To 
<FileDrop dataFromFileDrop={this.dataFromFileDrop}/>