資訊專欄INFORMATION COLUMN
摘要：表單配置信息有誤調用配置名稱表單的屬性按照加入請輸入名稱參數按照加入請輸入名稱請輸入請輸入名稱描述請輸入描述多選請輸選擇單選選擇日期選擇日期提交布局內容
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"
}
}
]
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 3160·2021-11-19 09:40
閱讀 3647·2021-11-16 11:52
閱讀 2980·2021-11-11 16:55
閱讀 3171·2019-08-30 15:55
閱讀 1177·2019-08-30 13:08
閱讀 1656·2019-08-29 17:03
閱讀 3012·2019-08-29 16:19
閱讀 2579·2019-08-29 13:43
