在 react-dropzone-uploader 的 onSubmit 方法中访问 props

Question

我正在使用 react-dropzone-uploader 上传文件。一切正常；除了我希望在单击提交按钮后更新父组件。我该怎么办？

这是我使用的部分代码：


export default () => {

  const handleSubmit = (files, allFiles) => {
    console.log('uploads files:', files, this)
    // There is no access to props here.
  }

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      onSubmit={handleSubmit}
      accept="image/*,.pdf,.doc,.docx"
    />
  )
}

Answer 1

因为它是一个功能组件，所以您不需要 this 并且您可以从

获得道具

export default (props) => {

  const handleSubmit = (files, allFiles) => {
    console.log('uploads files:', files)
    // Get set state function from props
    props.setFiles(files)
  }

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      onSubmit={handleSubmit}
      accept="image/*,.pdf,.doc,.docx"
    />
  )
}

并且在父级中，您可以将此组件称为

...
const [files, setFiles] = useState(null)
...
return (
  <div>
  <div>Drop files</div>
  <CustomDropzone setFiles={setFiles} />
  </div>
)

在 react-dropzone-uploader 的 onSubmit 方法中访问 props

Accessing props in onSubmit method of react-dropzone-uploader

javascript

reactjs

react-props

react-state

react-dropzone