React Dropzone：需要将 id 与要上传的文件一起传递

Question

我使用 React Dropzone 将文件上传到我的 Node.js 服务器。

当文件被拖放到拖放区时，handleOnDrop() 方法被调用。然后调用另一个uploadPicture()方法。

...
handleOnDrop = (files) => {
    this.uploadPicture(files);
}

render() {
    const dropzone =
        <Dropzone onDrop={this.handleOnDrop}>
            {({ getRootProps, getInputProps }) => (
                <section className="container">
                    <div {...getRootProps({ className: 'dropzone' })}>
                        <input {...getInputProps()} />
                        <p>Drag 'n' drop some files here, or click to select files</p>
                    </div>
                </section>
            )}
        </Dropzone>
}

return (
    <div>
        <h1>Dropzone test</h1>
        {dropzone}
    </div>
}
...

我对 file 参数感到惊讶：它是已知 handleOnDrop() 方法，即使我没有通过它在这一行 <Dropzone onDrop={this.handleOnDrop}>。我不明白 file 传递给方法的位置。
我也不明白getRootProps、getInputProps在Dropzone里面的作用。也许它与上述问题有关。
最后，我想传递我要更新图片的对象的id（<Dropzone>将在array.map(item => ())中，我将能够访问 item.id).

我试过这个非工作代码和许多变体，但我仍然无法将item.id传递给uploadPicture()方法。


handleOnDrop = (id, files) => {
    this.uploadPicture(id, files);
}

<Dropzone onDrop={() => this.handleOnDrop(item.id)}>

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

你的handleDrop接受两个参数，但你只传入一个，

您可以试试这个：

<Dropzone onDropAccepted={(files) => this.handleOnDrop(files,item.id)}>

React Dropzone：需要将 id 与要上传的文件一起传递

React Dropzone : need to pass id with file to upload

reactjs

react-dropzone

dropzone