项目场景：

通过后台获取到数据，在页面动态渲染生成表单

问题描述

因为业务需求，我们从后台获取的数据有多层嵌套，数据结构为数组-对象-数组，第一层比较简单就能渲染出来，要注意的点是对表单的类型进行判断，我是通过switch 来实现的，主要代码如下

switch(type){case '文本':return <input>;case '日期'：return <DatePicker>........
}

对我来说难点就是第一层后面的数据，刚开始我尝试了各种方法都没有成功，也没有百度到，后面就请教了经验比较丰富的大神。思路如下：当我点击有子选项的项时，就把它拿出来放到数组中所点击项的后面这样就会渲染出来了，

let dataList=[
{id:1,oplist:[],....
},
{id:2,oplist:[],....
},
{id:3,oplist:[{id:5,oplist:[],....
}],....
},
]

点击id为3的数据时，把它的子项id为5的数据拿出来放到id为3的后面

let dataList=[
{id:1,oplist:[],....
},
{id:2,oplist:[],....
},
{id:3,oplist:[{id:5,oplist:[],....
}],....
},{id:5,oplist:[],....
}
]

遇到的第二个问题就是多个日期存在时，选择日期时只有一个可以选择，后面的日期操作会影响最开始操作的日期组件，这个问题也找了很久才找到原因，是因为日期组件需要一个visible来控制日期面板的显示和隐藏，因为是动态生成的表单，所以visible也应该是动态的，而我之前是通过useState设置的，相当于都操作的同一个visible，所以打开的都是第一个面板。解决方法，在获取到数据的时候就去把日期ID全部筛选出来,放到一个新数组里面并给每个Id设置一个状态，页面使用的时候就从这个数组中根据Id获取它的状态，这样就解决了这个问题。

antd design mobile +react 动态生成表单相关推荐

vue动态生成表单元素基础篇
这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况图二: 点击 "+" 添加生成表单的情况图三: 表单中可以输入值,并 ...
vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
没有form的表单验证_PHP动态生成表单，内置17种常用组件并且支持表单验证！
FormBuilder 是一个开源的PHP表单生成器,可以快速生成现代化的form表单.还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件 github | 文档环境需求 ...
react-hooks+Ant Design Mobile中的自定义表单验证
Ant Design Mobile中的表单校验将validator放在 rules 对象中 <Form.Itemname='uName'label='姓名'requiredrules={[{r ...
layui -- autoForm 模块(动态生成表单,非官网模块)
动态生成form表单的需求可用, formTemplate.html 和 autuform.js 在同级目录 ,使用方式如下创建 autoform文件夹 formTemplate.html 和 au ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...
antd 动态添加表单_react Ant Design 动态生成表单，并带验证
写点杂记,写这个文章原因是因为我对象要做这个功能,我们正好用到了特意拆写成了1个简单的demo import React, {Component} from 'react' import {conne ...
多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...

antd design mobile +react 动态生成表单

项目场景：

问题描述

antd design mobile +react 动态生成表单相关推荐

最新文章

热门文章