在 redux-form 的 6.0 rc.3 版本中添加用于上传多个图像的字段

Question

我正在试验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" />

思路二：使用第三方 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 函数，第二种想法似乎更有希望，但是，我不知道如何使用 6.0.0 版的 API 添加字段rc.3。有谁知道吗？

Answer 1

经过一番努力，我通过稍微修改Dropzone 组件的onDrop 回调来实现我的第二个想法。修改包括使用reduxForm包装组件的dispatch函数，动作类型为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
        });
    }

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