reactjs - redux 表单和 Material ui 框架——拖放文件 uploader

Question

我正在构建一个使用 redux 表单和 Material ui 框架的嵌套表单框架——到目前为止，我已经在这里构建了组件 - https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

我想做的是添加一个上传字段 - 我看过这个例子。 How to enable file upload on React's Material UI simple input?

<Button
  variant="contained"
  component="label"
>
  Upload File
  <input
    type="file"
    style={{ display: "none" }}
  />
</Button>

但特别是一些更像拖放的东西。 -- 是否可以构建更定制化和更简洁的东西，而无需安装另一个可能具有强制样式的模块。

https://www.npmjs.com/package/material-ui-dropzone

https://codesandbox.io/s/vj1q68zm25?file=/src/ImageUpload.js

---

---

--- 旧代码

http://jsfiddle.net/5rbqehz3/1/

---- 在此处使用 renderDragDrop 起始文件 -- 调整代码，以便当用户将文件拖到该区域时 -- 它会填充 redux 表单字段 - textarea 文件类型与文件 --- 如果它是将多个文件添加到字段的情况——或动态添加字段以容纳每个文件——已上传。

它是我需要关注的集成部分——如果它是隐藏旧学校字段的情况——但要响应拖放界面填充它们。

-- 最新代码 2020 年 11 月 17 日 https://codesandbox.io/s/pensive-darwin-dpdwj

2020 年 11 月 22 日

正常

拖动 - 粉红色框出现，虚线向内移动

我需要帮助来获得正确的样式——并清理这个代码库

--- 我目前的尝试 -- https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js

Answer 1

对此没有开箱即用的解决方案。正如您所建议的，您可以添加一些可以修改样式的包，或者进行自定义实现。如果您决定使用自定义实现，这里很有用 article怎么做。