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

编程问答 2022-06-07

问题描述

我正在构建一个使用redux表单和材料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

enter image description here

---旧代码

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

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

它是我需要关注的集成部分-如果是从旧的学校视野中看不见的情况-但要根据拖放界面来填充它们。

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

2020年11月22日

正常

enter image description here

在拖动时-出现粉红色框，并且虚线向内动画

enter image description here

我需要正确的样式帮助-并清理此代码库

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

解决方法

This solution是您要实现的目标的简单解决方案，它具有自动提交和单击提交功能，并且不会强制样式。

,

没有一个开箱即用的解决方案。您可以按照建议添加一些可以在样式上进行修改的包，或者进行自定义实现。如果您决定采用自定义实现，则这里的article方法非常有用。

material-uireactjsreactjs