antd经常使用表单组件

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 <br> }else if(item.tag =="Checkbox"){<br> return <CheckboxGroup {...item.props } /><br> }else if(item.tag =="Radio"){<br> return <RadioGroup {...item.props } /><br> }else if(item.tag =="Select"){<br> const optiOns= item.props.options.map(d => <Option key={d.value}>{d.label}</Option>);<br> return <Select {...item.props }>{options}</Select><br> }else if(item.tag =="RangePicker"){<br> return <RangePicker {...item.props }/><br> }else if(item.tag =="DatePicker"){<br> return <DatePicker {...item.props }/><br> }else if(item.tag =="Button"){<br> return <Button {...item.props }>{item.props.text}</Button><br> }else{<br> return <div red"}}>表单设置信息有误</div><br> }<br> }<br> getElement (){<br> const { getFieldDecorator } = this.props.form;<br> let elements = []<br> this.props.formItme.forEach((item,index)=>{<br> if(item.tag){<br> elements.push(<br> key={item.tag+index}<br> {...item.tailFormItemLayout}<br> label={item.lable}<br> ><br> {getFieldDecorator(item.id, item.getFieldDecoratorOption)(<br> this.getInput(item)<br> )}<br> <br> )<br> }<br> })<br> return elements<br> }<br> render(){<br> return(<br> <br> {this.getElement( )}<br> <br> )<br> }<br>}<br>const WrappedBasicForm = Form.create({ name: 'basicForm' })(basicFormUtil);<br>export default WrappedBasicForm;</code></pre><p>挪用basicFormUtil.js</p><p><code> const formItemLayout = {<br> labelCol: {<br> md: { span: 24 },<br> lg: { span:3 },<br> xl: { span:3 },<br> },<br> wrapperCol: {<br> md: { span: 24 },<br> lg: { span: 15 },<br> xl: { span: 15 },<br> },<br>};<br>const tailFormItemLayout = {<br> wrapperCol: {<br> md: {<br> offset: 0,<br> },<br> lg: {<br> offset: 3,<br> },<br> },<br>};<br>//form设置<br>const formOption = [<br> {<br> tag:"Input",<br> lable:"称号",<br> id:"name",<br> //表单的属性根据antd api到场<br> props:{<br> type:"text",<br> placeholder:"请输入称号",<br> },<br> //getFieldDecoratorOption参数根据antd api到场<br> getFieldDecoratorOption:{<br> rules:[<br> {<br> required:true,<br> message:"请输入称号"<br> }<br> ]<br> }<br> },{<br> tag:"Input",<br> lable:"URL",<br> id:"url",<br> props:{<br> type:"text",<br> placeholder:"请输入URL",<br> },<br> getFieldDecoratorOption:{<br> rules:[<br> {<br> required:true,<br> message:"请输入称号"<br> }<br> ]<br> }<br> },{<br> tag:"TextArea",<br> lable:"形貌",<br> id:"desc",<br> props:{<br> type:"text",<br> placeholder:"请输入形貌",<br> },<br> },{<br> tag:"Checkbox",<br> lable:"多选",<br> id:"Checkbox",<br> placeholder:"Checkbox",<br> props:{<br> placeholder:"Checkbox",<br> options: [<br> { label: 'Apple', value: 'Apple' },<br> { label: 'Pear', value: 'Pear' },<br> { label: 'Orange', value: 'Orange' },<br> ]<br> },<br> getFieldDecoratorOption:{<br> rules:[<br> {<br> required:true,<br> message:"请输挑选"<br> }<br> ]<br> }<br> },{<br> tag:"Radio",<br> lable:"单选",<br> id:"Radio",<br> props:{<br> placeholder:"Radio",<br> options: [<br> { label: 'Apple', value: 'Apple' },<br> { label: 'Pear', value: 'Pear' },<br> { label: 'Orange', value: 'Orange' },<br> ]<br> },<br> },{<br> tag:"Select",<br> lable:"Select",<br> id:"Select",<br> props:{<br> placeholder:"Select",<br> mode:"multiple",<br> options: [<br> { label: 'Apple', value: 'Apple' },<br> { label: 'Pear', value: 'Pear' },<br> { label: 'Orange', value: 'Orange' },<br> ]<br> },<br> },{<br> tag:"DatePicker",<br> lable:"DatePicker ",<br> id:"DatePicker",<br> props:{<br> placeholder:"挑选日期",<br> format:'YYYY/MM/DD',<br> onChange:this.onchange<br> }<br> },{<br> tag:"RangePicker",<br> lable:"RangePicker ",<br> id:"RangePicker",<br> props:{<br> placeholder:"挑选日期",<br> format:'YYYY/MM/DD',<br> onChange:this.onchange<br> }<br> },{<br> tag:"Button",<br> id:"submit",<br> tailFormItemLayout:tailFormItemLayout,<br> props:{<br> text:"提交",<br> type:"primary",<br> htmlType:"submit"<br> }<br> }<br>]</code></pre><p><code><BasicFormUtil<br> //规划<br> formItemLayout={formItemLayout}<br> //form内容<br> formItme={formOption}<br>/></code></pre> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/js" target="_blank" title="js">js</a></li> <li><a href="https://www.php1.cn/tag/import" target="_blank" title="import">import</a></li> <li><a href="https://www.php1.cn/tag/react" target="_blank" title="react">react</a></li> <li><a href="https://www.php1.cn/tag/input" target="_blank" title="input">input</a></li> <li><a href="https://www.php1.cn/tag/ip" target="_blank" title="ip">ip</a></li> <li><a href="https://www.php1.cn/tag/cas" target="_blank" title="cas">cas</a></li> <li><a href="https://www.php1.cn/tag/select" target="_blank" title="select">select</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> <li><a href="https://www.php1.cn/tag/算法" target="_blank" title="算法">算法</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了