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>
        );
    };
}

当我运行该应用程序并将文件放入dropzone时，我收到一条错误消息，提示this.props.dataFromFileDrop不是一个函数。我可以知道我在哪里犯错吗？

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

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

this.props.dataFromFileDrop.bind(this);

Answer 1

函数名称FileDrop-File F rop

中的错误

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

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

1 个答案: