Reactjs 使用带有自定义输入字段的React Dropzone上载程序

我可以在react dropzone上传器中集成输入吗？基本上，我从输入中获得的文件应该转到dropzone上传程序

React文件删除区：

---

是的，你可以。

发件人：

---

---

为了说明这与您的代码有什么不同：您只是在

的孩子时添加了自定义

。您需要如上所述，以便两者正确地“连接”在一起。

它表示找不到getFilesFromEvent。另外，我试图一次只插入一个文件。它是做什么的？对不起，我没有包括所有的东西。但是看看我包含的链接，我从那里得到了代码。在我上面发布的代码中，为什么dropzone uploader无法与自定义输入字段集成？因为您只是在

的孩子时添加了自定义

。自定义的

充当两者之间的“粘合剂”，以便它们正确地“连接”在一起。如果我只需要上传一个文件，如何修改代码？

<Dropzone
    maxFiles={1}
    accept="image/*"
    getUploadParams={getUploadParams}
    onChangeStatus={handleChangeStatus}
    multiple={false}
    ref={setInputEl}
>
    <input
        ref={setInputEl}
        accept="image/*"
        className={classes.input}
        id="icon-button-file"
        type="file"
        onChange={handleFileChange}
    />
</Dropzone>

// https://github.com/quarklemotion/html5-file-selector
import { getDroppedOrSelectedFiles } from 'html5-file-selector'

const CustomInput = () => {
  const handleSubmit = (files, allFiles) => {
    console.log(files.map(f => f.meta))
    allFiles.forEach(f => f.remove())
  }

  const getFilesFromEvent = e => {
    return new Promise(resolve => {
      getDroppedOrSelectedFiles(e).then(chosenFiles => {
        resolve(chosenFiles.map(f => f.fileObject))
      })
    })
  }

  return (
    <Dropzone
      accept="image/*,audio/*,video/*,.pdf"
      getUploadParams={() => ({ url: 'https://httpbin.org/post' })}
      onSubmit={handleSubmit}
      InputComponent={Input}
      getFilesFromEvent={getFilesFromEvent}
    />
  )
}

const Input = ({ accept, onFiles, files, getFilesFromEvent }) => {
  const text = files.length > 0 ? 'Add more files' : 'Choose files'

  return (
    <label style={{ backgroundColor: '#007bff', color: '#fff', cursor: 'pointer', padding: 15, borderRadius: 3 }}>
      {text}
      <input
        style={{ display: 'none' }}
        type="file"
        accept={accept}
        multiple
        onChange={e => {
          getFilesFromEvent(e).then(chosenFiles => {
            onFiles(chosenFiles)
          })
        }}
      />
    </label>
  )
}