Отправка статуса загрузки файла из компонента Reaction-Dropzone в родительский? - PullRequest
Новая
       14

Отправка статуса загрузки файла из компонента Reaction-Dropzone в родительский?

0 голосов
/ 11 октября 2018

Я пытаюсь отправить статус загруженного файла обратно в родительский компонент, используя реквизиты и обратные вызовы (как описано в этом руководстве).

Моя загрузка файлаобрабатывается компонентом Reaction-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 в качестве опоры для компонента Dropzone?

Добавление этого кконструктор в FileDrop не помог: 

this.props.dataFromFileDrop.bind(this);

1 Ответ

0 голосов
/ 11 октября 2018

Ошибка в имени функции FileDrop - Файл F rop 

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