使用 react-dropzone 创建列表答案

【问题标题】：creating a list with react-dropzone使用 react-dropzone 创建列表
【发布时间】：2017-11-28 12:34:36
【问题描述】：

我正在尝试使用 react-dropzone 创建一个画廊。我成功地添加了图像，但不是创建一个数组，就像我认为我是按照他们的 github 做的那样，它只是加载一个图像并在我拖动另一个图像时用新的图像替换它。预期的结果是将图像添加到我已经拖入其中的图像旁边。

我正在指定一个名为 files: [], 的空数组，我想它会收集图像。

我班级中的 dropzone 元素如下所示：

 let dropzoneRef;

 <Dropzone
    ref={
        (node) => {
            dropzoneRef = node;
        }
    }
    onDrop={this.onDrop.bind(this)}>
    <p>Drop files here.</p>
 </Dropzone>
 <RaisedButton
    label="Upload File"
    primary={false}
    className="primary-button"
    onClick={() => { dropzoneRef.open(); }}
  />

  <ul>
     {
        this.state.files.map(f =>
            <li key={f.preview}>
                <img className="dropped-image" src={f.preview} alt=""/>
            </li>,
        )
     }
  </ul>

我将工作代码添加到 WebpackBin 供您检查

他们的 github 文档是 here

这是我的目标屏幕。我还没有完成第二部分，即单击添加的任何单个缩略图并以全尺寸显示。所以不要担心那部分。我只需要能够收集一个列表并添加任意数量的列表。这是预期结果的屏幕截图。（我为幼儿园的写作道歉）

提前谢谢你

【问题讨论】：

标签： reactjs dropzone.js

【解决方案1】：

您需要做的就是更新您的onDrop 函数，如下所示

onDrop(uploadedFile) {
    this.setState({
        files: this.state.files.concat(uploadedFile),
    });
}

这是因为您要将新文件添加到this.state.files 数组中。

查看更新后的WebpackBin。

【讨论】：