antd 动态添加表单_react Ant Design 动态生成表单，并带验证

写点杂记，写这个文章原因是因为我对象要做这个功能，我们正好用到了特意拆写成了1个简单的demo

import React, {Component} from 'react'

import {connect} from 'react-redux'

import { Switch,Form,Radio,Input ,Button} from 'antd';

let TestData = {

"code": 0,

"itemList": [{

"itemId": 65,

"itemName": "审核意见",

"itemNameEn": "shyj",

"type": "TEXT",

"options": "",

"optionsEn": "",

"ifrequire": 1,

"listOrder": 1,

"val": ""

}, {

"itemId": 66,

"itemName": "审核结果",

"itemNameEn": "shjg",

"type": "RADIO",

"options": "PASS:通过\r\nNOT_PASS:不通过",

"optionsEn": "NOT_PASS:Not Pass",

"ifrequire": 1,

"listOrder": 2,

"val": ""

}]

}

// @connect(

// // 你需要啥属性放到state里面

// state => {

// console.log(state)

// return {num: state.counter.number}

// },

// {}

// )

@Form.create()

class AnalysisTree extends Component {

componentDidMount() {

console.log(TestData)

}

onChange =(value)=>{

}

handleSubmit = e => {

e.preventDefault();

this.props.form.validateFieldsAndScroll((err, values) => {

if (!err) {

console.log('Received values of form: ', values);

}

});

};

render() {

const {getFieldDecorator } = this.props.form;

return (

{

TestData.itemList.map((data,i)=>{

switch (data.type){

case 'TEXT':

return(

{getFieldDecorator(JSON.stringify(data.itemId),{

rules: [{

required: true,

message: '请填写正确的' + data.itemName}],

})(

)}

);

case 'RADIO':

return(

{getFieldDecorator(JSON.stringify(data.itemId),{

rules: [{

required: true,

message: '请填写正确的' + data.itemName}],

})(

完成

未完成

)}

);

default :

return '';

}

})

}

提交

)

}

export default AnalysisTree

antd 动态添加表单_react Ant Design 动态生成表单，并带验证相关推荐

antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
antd表格显示分页怎么取消_react + Ant Design 实现table表格分页和删除
首先下载 antd: npm install antd --save引入:import {Table,Tag,Space,Button } from "antd";在回调函数里定义 ...
react 动态添加组件属性_React的组件动态参数使用Underscore和Context来传递
通常情况下,子组件明确地知道从props中传入的属性,甚至要对传入的属性进行限定.但父组件向子组件传递参数时,有时参数名称是作为变量出现的,无法预先明确下来,这就是动态的参数传递.动态参数传递的方法是 ...
ant design 动态给a-input设置默认值
ant design 动态给a-input设置默认值描述一下我遇到的问题在病种名称中输入内容,点击查询会打开一个新的form,需要把病种名称框中内容传到后面的text中在弹窗中的a-input ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
Scss实现Ant design色板生成算法
前言努力学习的我,最近在看Ant Design,然后不经意间看到了Ant Design对于色彩的设计,可以通过一种主色调生成其他衍生色,而且附上了Ant Design色板生成算法演进之路这篇文章,大 ...
Navicat创建数据库表、导入sql文件，生成表结构
Navicat创建数据库表 .导入sql文件,生成表结构 1.打开Navicat 2.远程连接mysql连接 3.创建数据库 4.导入sql文件 5.生成表结构 1.打开Navicat 2.远程连接m ...
ant 改变表格数据_React ant design表格导出数据为EXCEL表格数据
一.由于公司项目需要,需要将表格数据导出为EXCEL表格数据.环境React+Ant Design 二.安装插件js-export-excel yarn安装-记得以管理员身份执行 yarn add j ...
表单组件 form fastadmin（生成表单元素）
Form组件定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

antd 动态添加表单_react Ant Design 动态生成表单，并带验证

antd 动态添加表单_react Ant Design 动态生成表单，并带验证相关推荐

最新文章

热门文章