使用react-dropzone创建列表

Question

我正在尝试使用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

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

提前谢谢

Answer 1

您需要做的就是更新onDrop功能，如下所示

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

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

请参阅此更新WebpackBin。