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

Question

我正在尝试使用道具和回调将上传文件的状态发送回父组件（如 this 教程中所述）。

我的文件上传由 react-dropzone 组件处理。

这是我的组件：

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 作为 prop 传递给 Dropzone 组件吗？

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

this.props.dataFromFileDrop.bind(this);

Answer 1

函数名错误 FileDrop - FileFrop

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

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

Sending file upload status from react-dropzone component to parent?

reactjs

react-dropzone