React根据后台数据动态生成Form表单
2017-03-22 10:19
686 查看
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'));
效果图:
相关文章推荐
- 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态
- 根据后台传的数据动态生成grid的列和store的注意事项
- 基于iView中后台开发(1)-根据列定义动态生成表单
- 根据后台数据动态生成表格
- 四【用django2.0来开发】后台会员管理(二) ModelForm表单的使用方法以及数据验证
- ssm框架后台未成功接受到前台form表单传入数据问题
- 使用Django Form解决表单数据无法动态刷新的两种方法
- js同时提交多个Form表单数据至后台的拼装处理
- form enctype:"multipart/form-data",method:"post" 提交表单,后台获取不到数据
- 根据后台接口获取动态数据,使用JS拼接html
- jquery.form插件中动态修改表单数据
- Flex根据后台的数据自动生成AdvancedDataGrid
- 关于form表单中动态添加数据的验证
- 根据后台数据动态在html页面显示新的数据的方法:
- 根据表中数据动态生成菜单(三)
- extjs4 数据库读取数据动态生成表单
- 使用serialize()提交form表单数据后台为null问题解决
- springMVC+thymeleafform表单提交前后台数据传递
- 在Activiti中集成JPA(解决动态表单生成的大量数据)
- ajax 请求后台数据(及使用FormData对象提交表单及上传图片)