reactjs-redux表单和材质ui框架—；拖放文件上传器

我正在构建一个嵌套表单框架，该框架使用redux表单和材质ui框架——到目前为止，我已经在这里构建了组件-

我想做的是——添加一个上传字段——我已经看到了这个例子。

上载文件

但特别是一些更像是拖拽的东西是否有一些东西可以构建得更加定制和干净，而不必安装另一个可能具有强制样式的模块

---

---

---旧代码

----在这里使用renderDragDrop起始文件--调整代码，以便当用户将文件拖动到区域时--它使用文件填充redux表单字段-textarea文件类型--如果是向字段添加多个文件--或者动态添加字段以容纳每个上载的文件

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

--最新代码2020年11月17日

2020年11月22日

正常的

拖动时-粉红色框出现，虚线向内设置动画

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

---

---我当前的尝试--

没有现成的解决方案。正如您所建议的，您可以添加一些可以按样式修改的包，或者进行自定义实现。如果您决定使用自定义实现，这里有一个很有用的方法。

是您想要实现的一个简单解决方案，它既有自动提交功能，也有点击提交功能，而且不强制使用样式。

谢谢-我会检查一下-我遇到的一个问题是设置输入失败-可能是因为它只是一个常规的html5输入，而不是redux或material ui部分的一部分-我不确定如何获得一些基本的东西，你可以在Chnage上看到事件，并按需要的方式操作数据。此外，我认为它不能衡量它是常规输入标记还是材料的一部分，它应该在这两种情况下都能工作。当我试图让它工作时，它出现了一些错误--“未能在'HTMLInputElement'上设置'value'属性”：此输入元素接受一个文件名，该文件名可能只能通过编程设置为空字符串。”我试着让一个基本的文件上传字段工作——但当我点击提交按钮时，它根本没有被拾取——但是@Milan Milicevic我需要更改输入——不仅仅是从输入本身拾取onChange事件——所以当用户拖拽/丢弃一个文件时——我想更改输入——编程调用我似乎无法获取该文件当我提交时，上传到redux表单中注册-我想这是因为我没有将操作员分散到现场但是由于设置了值，它出现了故障？--我目前的尝试——在上一个codesandbox中，您似乎实现了您想要的。当您将要删除文件时，该框将更改其颜色。那么这个问题的状态是什么呢？不，它需要成为我构建的表单框架的一部分——我需要这样的“$form.find（'input[type=“file”]”）.prop（'files'，droppedFiles）；”——但它说它不起作用——我正试图用refSo@AKC隔离这个字段——这意味着我不能使用我的表单框架来存放draganddrop？它必须是一个单独的组件，只能通过ajax上传-因为您无法通过编程更改输入字段的值？@TheOldCounty此解决方案仅使用html CSS和普通JavaScript，你可以让它成为一个standalone@TheOldCounty此外，此解决方案还提供了仅使用ajax的指南EAH，但它不能与我的表单框架一起使用-我不能让拖放更改输入值

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