redux-form ver 6.0 rc.3 添加多图上传字段

Question

我正在试验 redux-form v6.0.0 rc.3 并尝试添加一个用于上传多张图片的字段。

思路一：增加一个type="file"

的字段

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

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

思路二：使用第三方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。有人知道吗？

Answer 1

经过一番努力，我通过稍微修改 Dropzone 组件的 onDrop 回调实现了我的第二个想法。修改包括使用动作类型为 redux-form/CHANGE.

的 reduxForm 包装器组件的 dispatch 函数

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

然后在 reducer 中，我观察动作类型 redux-form/CHANGE 并提取要上传的文件。这可能有点太老套了，但它适用于当前的 ver 6 RC3 API.

redux-form ver 6.0 rc.3 添加多图上传字段

Adding a field for uploading multiple images in ver 6.0 rc.3 of redux-form

javascript

dropzone.js

reactjs

redux-form