使用 react-dropzone 创建列表

Question

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

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

我的 class 中的 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

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

提前致谢

Answer 1

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

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

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

查看此更新 WebpackBin。

使用 react-dropzone 创建列表

creating a list with react-dropzone

dropzone.js

reactjs