摘要：表单配置信息有误调用配置名称表单的属性按照加入请输入名称参数按照加入请输入名称请输入请输入名称描述请输入描述多选请输选择单选选择日期选择日期提交布局内容
basicFormUtil.js
import React from "react"
import { Form, Input, Tooltip, Icon, Cascader, Select,Radio, Row, Col,DatePicker, Checkbox, Button, AutoComplete} from "antd";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
const { Option } = Select;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const { MonthPicker, RangePicker,WeekPicker } = DatePicker;
class basicFormUtil extends React.Component{
constructor(props){
super(props);
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
}
getInput(item){
if(item.tag =="Input"){
return
}else if(item.tag =="TextArea"){
return
}else if(item.tag =="Checkbox"){
return
{getFieldDecorator(item.id, item.getFieldDecoratorOption)(
this.getInput(item)
)}
)
}
})
return elements
}
render(){
return(
)
}
}
const WrappedBasicForm = Form.create({ name: "basicForm" })(basicFormUtil);
export default WrappedBasicForm;
调用basicFormUtil.js
const formItemLayout = {
labelCol: {
md: { span: 24 },
lg: { span:3 },
xl: { span:3 },
},
wrapperCol: {
md: { span: 24 },
lg: { span: 15 },
xl: { span: 15 },
},
};
const tailFormItemLayout = {
wrapperCol: {
md: {
offset: 0,
},
lg: {
offset: 3,
},
},
};
//form配置
const formOption = [
{
tag:"Input",
lable:"名称",
id:"name",
//表单的属性按照antd api加入
props:{
type:"text",
placeholder:"请输入名称",
},
//getFieldDecoratorOption参数按照antd api加入
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输入名称"
}
]
}
},{
tag:"Input",
lable:"URL",
id:"url",
props:{
type:"text",
placeholder:"请输入URL",
},
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输入名称"
}
]
}
},{
tag:"TextArea",
lable:"描述",
id:"desc",
props:{
type:"text",
placeholder:"请输入描述",
},
},{
tag:"Checkbox",
lable:"多选",
id:"Checkbox",
placeholder:"Checkbox",
props:{
placeholder:"Checkbox",
options: [
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange" },
]
},
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输选择"
}
]
}
},{
tag:"Radio",
lable:"单选",
id:"Radio",
props:{
placeholder:"Radio",
options: [
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange" },
]
},
},{
tag:"Select",
lable:"Select",
id:"Select",
props:{
placeholder:"Select",
mode:"multiple",
options: [
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange" },
]
},
},{
tag:"DatePicker",
lable:"DatePicker ",
id:"DatePicker",
props:{
placeholder:"选择日期",
format:"YYYY/MM/DD",
onChange:this.onchange
}
},{
tag:"RangePicker",
lable:"RangePicker ",
id:"RangePicker",
props:{
placeholder:"选择日期",
format:"YYYY/MM/DD",
onChange:this.onchange
}
},{
tag:"Button",
id:"submit",
tailFormItemLayout:tailFormItemLayout,
props:{
text:"提交",
type:"primary",
htmlType:"submit"
}
}
]
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109384.html
摘要：是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为。所以数组元素如果为的话，其内容就是的。到目前为止，表单适合大部分的表单应用场景。 JSON表单 描述 JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。JSON表单的优点是： 可以快速构建出一个表单 表单的数据、逻辑、视图分...
摘要：嵌套组件配置如果表单组件里还含有其他表单组件，这时直接通过组件配置去渲染无疑能节约不少的工作量。请输入方法传入组件配置的列表就能渲染出表单组件来，需要注意的是，子表单组件的一定是基于父表单组件的。表单的实例方法请看下节的生成表单四 container表单组件 在实际的项目中，JSON表单提供的表单组件是远远不够的，而且提供表单组件是一件低效的事，目前Ant Design组件库提供的表单...
摘要：会在用户每次按下提交时进行一次完整校验或更改时进行一次单表单项的验证。传入为表单值与外部自定义传入的返回值为一个对象的表单提交处理而表单提交的处理，和我们做表单验证类似，只需要参考官方示例我们就可以简单的实现表单提交功能。 大家好，工作闲暇之余又来续写一下Formik这个库的文章了，这次文章主要内容为如下： 更多表单组件的封装示例 单选/多选按钮 选择器 时间选择器 文本输入框 ...
我们今天来讲讲关于ahooks 源码，我们目标主要有以下几点： 深入了解 React hooks。 明白如何抽象自定义 hooks，且可以构建属于自己的 React hooks 工具库。 小建议：培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。 列表页常见元素 后台管理系统中常见典型列表页包括筛选表单项、Table表格、Pagination分页这三部分。 针对使用 Ant...
摘要：场景下有三个，每个下是一个表单，点击不同下的提交按钮只能验证当前提交其值，进行相关操作问题判断校验结果就是对整个页面的进行判断，并不能够对单个校验结果做判断。 场景 ： Tabs下有三个TabPane，每个TabPane下是一个form表单，点击不同form下的提交按钮只能验证当前form.item,提交其value值，进行相关操作 问题 ： this.props.form.va...
阅读 3159·2021-11-19 09:40
阅读 3647·2021-11-16 11:52
阅读 2980·2021-11-11 16:55
阅读 3170·2019-08-30 15:55
阅读 1176·2019-08-30 13:08
阅读 1655·2019-08-29 17:03
阅读 3011·2019-08-29 16:19
阅读 2579·2019-08-29 13:43
