antd动态添加表单_react antd 动态表单

最新推荐文章于 2024-08-19 15:32:24 发布

IT巫师

最新推荐文章于 2024-08-19 15:32:24 发布

阅读量985

点赞数

文章标签： antd动态添加表单

本文链接：https://blog.csdn.net/weixin_29008805/article/details/112884262

版权

这篇博客展示了如何在React应用中结合Ant Design库动态创建表单。通过使用Antd的Form、InputNumber、Input、DatePicker和Select组件，实现了根据后台返回的数据格式动态生成表单，并提供了数据验证功能。在表单提交时，会验证所有字段并打印出表单的值。

摘要由CSDN通过智能技术生成

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 ={