Javascript 在redux表单的版本6.0 rc.3中添加用于上载多个图像的字段

我正在试验

redux form v6.0.0 rc.3

，并尝试添加一个用于上载多个图像的字段

Idea 1：添加一个type=“file”字段

附件图像（图像）{
console.info（'接收到的图像：'，图像）；
}

想法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（文件，evt）{ log（'received files:'，files）； evt.preventDefault（）； } 尝试在此处删除一些文件，或单击以选择要上载的文件。

---

我尝试了这两种方法，但第一种方法根本无法触发onDrop函数，第二种方法似乎更有希望，但是，我不知道如何使用6.0.0版rc.3的API添加字段。有人知道吗？

经过多次努力，我通过稍微修改

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

，并提取文件以供上传。这可能有点太粗糙了，但它适用于当前的ver 6 RC3 API。

经过多次努力，我通过稍微修改

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

，并提取文件以供上传。这可能有点太草率了，但它适用于当前的ver 6 RC3 API。

在有人提出更好的解决方案之前，它是可以接受的。希望有一天，这将有助于从搜索引擎登录此页面的用户。您是否找到了除上述解决方案之外的其他解决方案？在有人提出更好的解决方案之前，请接受。希望有一天，这将有助于从搜索引擎登录此页面的用户。除了上面的解决方案，您还找到过其他解决方案吗？