1.antd表单添加自定义upload组件并获取内容
antd表单添加自定义upload组件并获取内容
在前一篇文章中,源码
我们探讨了使用RemixJS上传到数据库的源码方法,但指出这种方法并不优雅。源码其不优雅之处主要体现在以下几方面:
1. 第3点的源码游戏试玩任务源码影响并不显著,使用上没有太大问题,源码但第2点确实让人感到不便。源码接下来,源码我将按照上述顺序逐一解答这些问题。源码
首先,源码针对第1点,源码即input type=file样式丑陋的源码冒险岛源码导入问题,经过一番搜索,源码并未找到理想的源码解决方案。在H5中,源码当input标签设置为type=file时,源码大多数属性都无法更改。尤果网 源码下载尽管如此,我们还是可以采用一些较为暴力的方法来解决这个问题。例如,可以通过隐藏和覆盖input来实现。具体做法是BUNTTON类构造函数源码将input标签覆盖在Button下面,然后利用Button的样式来隐藏input的丑陋外观。
第2点和第3点的问题可以通过组件化来解决。在这方面,我参考了antd的官方教程,并对其进行了修改。疯狂ajax讲义及源码以下是修改后的upload组件代码:
const Upload: React.FC = ({ value = { }, onChange }) => { }
在函数中,Value类型的value参数似乎是将数据返回给父组件,其中的base字符串数据可以在父组件中通过form.getFieldValue("name").pic来获取。对于triggerChange这一部分,似乎涉及到父子组件之间的参数传递机制,我目前对其理解还不够深入。不过,目前这个功能是可行的,所以我暂且不深入研究了。
在这段代码中,有一个让人烦恼的地方是老提示列表key不唯一的问题,似乎需要使用Form.List来解决。不过,目前还没有达到性能瓶颈,所以我先暂时搁置这个问题,回头再进行处理。