Добавление поля для загрузки нескольких изображений в версии 6.0 rc.3 редукс-формы

Я экспериментирую с redux-form v6.0.0 rc.3 и пытаюсь добавить поле для загрузки нескольких изображений.

Идея 1: добавьте поле с type="file"

attachImages(images) {
        console.info('images received: ', images);
    }

<Field
                      name="pics"
                      component={renderInput}
                      placeholder="Pictures"
                      onDrop={this.attachImages}
                      type="file" />

Идея 2. Использование стороннего компонента Dropzone:

onDrop(files, evt) {
        console.log('received files: ', files);
        evt.preventDefault();
    }

<Dropzone
                     onDrop={ this.dropFile }
                 >
                   <div>Try dropping some files here, or click to select files to upload.</div>
                 </Dropzone>

Я пробовал обе идеи, но первая вообще не может вызвать функцию onDrop, а вторая идея кажется более перспективной, однако я не знаю, как добавить поле с API для версии 6.0.0 rc.3 . Кто-нибудь знает?


reactjs javascript redux-form dropzone.js
person TonyGW    schedule 31.07.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

После долгих мучений я реализовал свою вторую идею, немного изменив обратный вызов onDrop для компонента Dropzone. Модификация включает в себя использование функции dispatch компонента-обертки reduxForm с типом действия redux-form/CHANGE.

onDrop(files, evt) {
        console.log('received files: ', files);
        evt.preventDefault();
        this.props.dispatch({
            type: 'redux-form/CHANGE',
            field: 'images',
            value: files, // files is an array of File
        });
    }

Затем в редьюсере я слежу за типом действия redux-form/CHANGE и извлекаю файлы для загрузки. Это может быть слишком хакерским, но оно работает с текущей версией 6 RC3 API.

person TonyGW    schedule 01.08.2016
comment
Принимается до тех пор, пока кто-нибудь не предложит лучшее решение. надеюсь, это принесет пользу кому-то, кто когда-нибудь попадет на эту страницу из поисковых систем. - person TonyGW; 02.08.2016
comment
Вы когда-нибудь находили решение, отличное от приведенного выше? - person John; 15.03.2017