我正在尝试使用道具和回调将上传文件的状态发送回父组件（如本教程中所述）。
我的文件上传由react-dropzone组件处理。
这是我的组件：
应用程序.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>
);
};
}
当我运行应用程序并将文件放入 dropzone 时，我收到一条错误消息，指出this.props.dataFromFileDrop它不是函数。我可以知道我在哪里犯了错误吗？
发生错误是因为我没有dataFromFileDrop作为道具传递给 Dropzone 组件吗？
将此添加到 FileDrop 中的构造函数没有帮助：
this.props.dataFromFileDrop.bind(this);