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

Question

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

我创建了一张照片 state 上传时将保存照片：

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 道具中的文件，以便我可以控制它们吗？

谢谢！

Answer 1

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

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

  // 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/*"
    />