資訊專欄INFORMATION COLUMN
摘要：表單配置信息有誤調(diào)用配置名稱表單的屬性按照加入請輸入名稱參數(shù)按照加入請輸入名稱請輸入請輸入名稱描述請輸入描述多選請輸選擇單選選擇日期選擇日期提交布局內(nèi)容
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;
調(diào)用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參數(shù)按照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"
}
}
]
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109384.html
摘要：是校驗表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應用場景。 JSON表單 描述 JSON表單是一個基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點是： 可以快速構(gòu)建出一個表單 表單的數(shù)據(jù)、邏輯、視圖分...
摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時直接通過組件配置去渲染無疑能節(jié)約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實例方法請看下節(jié)的生成表單四 container表單組件 在實際的項目中，JSON表單提供的表單組件是遠遠不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...
摘要：會在用戶每次按下提交時進行一次完整校驗或更改時進行一次單表單項的驗證。傳入為表單值與外部自定義傳入的返回值為一個對象的表單提交處理而表單提交的處理，和我們做表單驗證類似，只需要參考官方示例我們就可以簡單的實現(xiàn)表單提交功能。 大家好，工作閑暇之余又來續(xù)寫一下Formik這個庫的文章了，這次文章主要內(nèi)容為如下： 更多表單組件的封裝示例 單選/多選按鈕 選擇器 時間選擇器 文本輸入框 ...
我們今天來講講關(guān)于ahooks 源碼，我們目標主要有以下幾點： 深入了解 React hooks。 明白如何抽象自定義 hooks，且可以構(gòu)建屬于自己的 React hooks 工具庫?！ ⌒〗ㄗh：培養(yǎng)閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。 列表頁常見元素 后臺管理系統(tǒng)中常見典型列表頁包括篩選表單項、Table表格、Pagination分頁這三部分?！ ♂槍κ褂?Ant...
摘要：場景下有三個，每個下是一個表單，點擊不同下的提交按鈕只能驗證當前提交其值，進行相關(guān)操作問題判斷校驗結(jié)果就是對整個頁面的進行判斷，并不能夠?qū)蝹€校驗結(jié)果做判斷。 場景 ： Tabs下有三個TabPane，每個TabPane下是一個form表單，點擊不同form下的提交按鈕只能驗證當前form.item,提交其value值，進行相關(guān)操作 問題 ： this.props.form.va...
閱讀 3245·2021-11-19 09:40
閱讀 3704·2021-11-16 11:52
閱讀 3039·2021-11-11 16:55
閱讀 3244·2019-08-30 15:55
閱讀 1246·2019-08-30 13:08
閱讀 1723·2019-08-29 17:03
閱讀 3085·2019-08-29 16:19
閱讀 2636·2019-08-29 13:43
