如何从 React Dropzone 组件访问道具？

如何解决如何从 React Dropzone 组件访问道具？

我的项目涉及将一些照片拖到我的 React 应用程序上并能够上传它们。

我创建了一个照片状态，可以在上传时保存照片：

const [photo,setPhoto] = useState([]);

我的 dropzone 组件如下所示：

<div className="listItem__right__window__formWrapper">
                    <label className="listItem__right__window__inputLabel" htmlFor="">Upload Photo's:</label>
                    <Dropzone
                        className="dropzone"
                        autoUpload={false}
                        getUploadParams={getUploadParams}
                        onChangeStatus={handleChangeStatus}
                        onSubmit={handleSubmit}
                        accept="image/*,audio/*,video/*"
                        inputContent={(photo,extra) => (extra.reject ? 'Only Image,audio and video files allowed!' : 'Select and Drop Files')}
                        styles={{
                            dropzoneReject: { borderColor: '#F19373',backgroundColor: '#F1BDAB' },inputLabel: (photo,extra) => (extra.reject ? { color: '#A02800' } : {}),}}
                    />
                    <span className="listItem__right__window__nextIcon" onClick={clickNext}>
                        <KeyboardReturnIcon />
                        <h4>Press Enter To Advance</h4>
                    </span>
                </div>

所以我的想法是：

当我的 dropzone 组件发生变化时，我会调用 setPhoto 并存储当前上传的文件，如下所示：

// Return the current status of files being uploaded
const handleChangeStatus = ({ meta,file },status) => {
    setPhoto(this.props.files); //THIS DOESN'T WORK
}

遗憾的是这不起作用^^^

我可以看到文件是这样存储的：

有人可以帮助我以一种有效的方式访问 dropzones 道具中的文件，以便我可以控制它们吗？

谢谢！

解决方法

您似乎在使用 react-dropzone-uploader。如果我错了，请纠正我。

根据 documentation，您可以使用 onSubmit 属性传递一个函数，该函数将接收单击提交按钮时已完成上传的文件数组：

  // receives array of files that are done uploading when submit button is clicked
  const handleSubmit = (files,allFiles) => {
    console.log(files.map(f => f.meta))
    allFiles.forEach(f => f.remove())
  }

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      onSubmit={handleSubmit}
      accept="image/*,audio/*,video/*"
    />