react antd 动态表单
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Form, InputNumber, Input, DatePicker, Button, Select } from 'antd';
import moment from 'moment';
// 推荐在入口文件全局设置 locale
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); const FormItem = Form.Item;
const Option = Select.Option; // 后台返回的数据格式
const data = [
{
'field': 'jobid',
'text': '工号',
'errorMessage': '请输入工号',
'required': true,
'type': 'int',
'value': 100
},{
'field': 'date',
'text': '日期',
'errorMessage': '请输入日期',
'required': false,
'type': 'date',
'value': '2017-10-20'
},{
'field': 'username',
'text': '用户名',
'errorMessage': '请输入用户名',
'required': true,
'type': 'char',
'value': 'hello world'
},{
'field': 'customer',
'text': '客户',
'errorMessage': '请输入客户',
'required': true,
'type': 'select',
'value': '中兴',
'options': ['贝尔', '中兴', '烽火']
}
] // formItem css 样式
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
}
} // 保存按钮 css 样式
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 14,
offset: 6,
},
}
} // form css 样式
const formLayout = {
width: 400,
marginTop: 100,
marginLeft: 'auto',
marginRight: 'auto'
} class App extends Component {
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
} /**
* 根据后台返回的 data 中 type 类型生成不同的组件
* @param item json
* @param Component
*/
switchItem(item) {
const type = item.type;
switch (type) {
case 'int':
return <InputNumber style={{ width: '100%' }} />;
break;
case 'char':
return <Input />;
break;
case 'date':
return <DatePicker style={{ width: '100%' }} />;
break;
case 'select':
return (
<Select>
{
item.options.map((option, index) => {
return (<Option key={index} value={option}>{option}</Option>)
})
}
</Select>
)
default:
return <Input />;
break;
}
} render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} style={formLayout}>
{
data.map((item, index) => {
// type 为 date 日期格式需要强制转化为 moment 格式
item.value = item.type == 'date' ? moment(item.value, 'YYYY-MM-DD') : item.value;
return (
<FormItem
key={index}
{...formItemLayout}
label={item.text}
hasFeedback
>
{getFieldDecorator(item.field, {
initialValue: item.value,
rules: [{
required: item.required,
message: item.errorMessage
}],
})(
this.switchItem(item)
)}
</FormItem>
)
})
}
<FormItem {...tailFormItemLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
</FormItem>
</Form>
)
}
} const AppForm = Form.create()(App); ReactDOM.render(<AppForm />, document.getElementById('root'));
https://ant.design/components/form-cn/
Uncaught TypeError: Cannot read property 'props' of undefined
at handleSubmit (http://localhost:8088/js/app.js:78431:17)
at HTMLUnknownElement.callCallback (http://localhost:8088/js/app.js:59422:14)
at Object.invokeGuardedCallbackDev (http://localhost:8088/js/app.js:59461:16)
at Object.invokeGuardedCallback (http://localhost:8088/js/app.js:59318:27)
at Object.invokeGuardedCallbackAndCatchFirstError (http://localhost:8088/js/app.js:59332:43)
at executeDispatch (http://localhost:8088/js/app.js:59716:19)
at executeDispatchesInOrder (http://localhost:8088/js/app.js:59738:5)
at executeDispatchesAndRelease (http://localhost:8088/js/app.js:59836:5)
at executeDispatchesAndReleaseTopLevel (http://localhost:8088/js/app.js:59847:10)
at Array.forEach (native)
解决方法:
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
react antd 动态表单的更多相关文章
- react + antd Form表单校验
非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...
- 【react】实现动态表单中嵌套动态表单
要实现一个功能动态表单中嵌套动态表单如下: 仔细看看antd的文档其实不难 具体步骤如下 1.建立一个 名为 ConcatRegion的组件(动态表单A)代码如下 export function Co ...
- antd+vue3实现动态表单的自动校验
由于vue3用的人还不多,所以有些问题博主踩了坑只能自己爬出来了,特此做个记录.如有错误,请大家指正. 回归正题,我所做的业务是,动态添加表单项,对每一项单独做校验,效果如下: 主要代码如下: 1 & ...
- [K/3Cloud] 如何从被调用的动态表单界面返回数据
在需要返回数据的地方调用表单返回方法完成数据返回 this.View.ReturnToParentWindow(retData); 在调用界面的回调函数中取出返回结果的ReturnData即可使用. ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- 简易OA漫谈之工作流设计(六,快捷表单和动态表单)
如果没有表单设计功能,我们一般建物理表,再把表单挂接到流程, 我们可以把外接表单的地址填到表单地址中,地址中会传递一个id. 如果使用外接表单,在审批的时候可能会“不太友好”,因为在审批单上看不到任何 ...
- angularjs 动态表单, 原生事件中调用angular方法
1. 原生事件中调用angular方法, 比如 input的onChange事件想调用angular里面定义的方法 - onChange="angular.element(this).sco ...
- vue 开发系列(八) 动态表单开发
概要 动态表单指的是我们的表单不是通过vue 组件一个个编写的,我们的表单是根据后端生成的vue模板,在前端通过vue构建出来的.主要的思路是,在后端生成vue的模板,前端通过ajax的方式加载后端的 ...
- Struts动态表单(DynamicForm)
动态表单的含义是不要手动定义,直接在配置文件中进行定义. 1.手动进行定义 <form-beans > <form-bean name="userForm" ty ...
随机推荐
- 002-主流区块链技术特点及Hyperledger Fabric V0.6版本特点
一.主流区块链技术特点 二.HyperLedger子项目 三.Hyperledger fabric架构 V0.6逻辑架构: V0.6区块链网络 对应的0.6版本的运行时架构: 0.6版本的架构特点是: ...
- rtsp over udp
#include <stdio.h> #include <netinet/in.h> #include <sys/socket.h> #include <st ...
- C#数组的笔记
Array.Copy的笔记: 1.将值类型的元素装箱位引用类型的元素,比如讲一个Int32[]的元素复制到Object[]中 2.将引用类型的元素拆箱为值类型的元素 3.加宽CLR基元值类型,比如讲一 ...
- 用Tchromium替换webbrowser
用Tchromium替换webbrowser 用惯了EmbeddedWB,不想换,但是IE内核一直存在内存泄漏问题,没办法,只有寻找替代品了. 要把用习惯的EmbeddedWB换成完全不一样的TChr ...
- is和==
==判断两个对象值是否相等 is表示两个变量是否指向一块对象
- mysql第二天作业
create database 数据库名 default charset utf8;use 数据库名;1.创建成绩表,字段包括:学生姓名,语文成绩,数学成绩,英语成绩create table resu ...
- Python:笔记(4)——高级特性
Python:笔记(4)——高级特性 切片 取一个list或tuple的部分元素是非常常见的操作.Python提供了切片操作符,来完成部分元素的选取 除了上例简单的下标范围取元素外,Python还支持 ...
- selet2使用大全
selet2是一款input+selet结合的组件,是最好的搜索下拉框,没有之一.原因是别的没有,只有它这么一家,你没得选择.正如有人说它‘Select2不是特别好用,但又找不到比它更好的下拉框插件. ...
- Java并发之CountDownLatch的使用
Java并发之CountDownLatch的使用 一. 简介 Java的并发包早在JDK5这个版本中就已经推出,而且Java的并发编程是几乎每个Java程序员都无法绕开的屏障.笔者今晚在家闲来无事,翻 ...
- javascript Date对象 之 时间转字符串
javascript Date对象 --> 时间转字符串: 测试代码: <!DOCTYPE html> <html lang="en"> <he ...