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

【问题标题】：How do I access the props from my React Dropzone component?如何从我的 React Dropzone 组件访问道具？
【发布时间】：2021-06-25 01:55:43
【问题描述】：

我的项目涉及将一些照片拖到我的 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 道具中的文件，以便我可以控制它们？

谢谢！

【问题讨论】：

标签： reactjs react-hooks state dropzone.js dropzone

【解决方案1】：

您似乎正在使用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/*"
    />

【讨论】：