antd 4.x Form表單getFieldValue獲取內容和清空內容

前言：

1.   antd4.x版本不再支持create（）的方法，所以原來的this.props.form.getFieldDecorator()的方法找不到，form沒注冊到props里面

2.   4.x現在只用name=“username”來代替原來的{getFieldDecorator('username', { rules: [{ required: true, message: 'Username is required!' }], })

3.   獲取值的時候設置ref然后再獲取form下的getFieldDecorator()方法。

代碼實現如下：

import React from 'react';
import ReactDOM from 'react-dom';
import {Input,DatePicker,Form,Col,Button} from 'antd';
import 'antd/dist/antd.css';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';
moment.locale('zh-cn');
const { RangePicker } = DatePicker;

class FormItem extends React.Component{
	constructor(props){
		super(props);
	}
	// 獲取form的數據
	getFormData = (value)=>{
		console.log("formData:",this.refs.myForm.getFieldValue());
		// 獲取form的值
		let formData = this.refs.myForm.getFieldValue();
		if(formData.beginTime){
			// 轉換日期格式
			let beginTime = moment(formData.beginTime).format("YYYY-MM-DD HH:mm:ss");
		}
		if(formData.endTime){
			// 轉換日期格式
			let endTime = moment(formData.endTime).format("YYYY-MM-DD HH:mm:ss");
		}
		// 清空form的數據
		this.refs.myForm.resetFields();
	}
	render(){
		debugger;
		console.log(this.props);
		// const { getFieldDecorator } = this.props.form;
		return(
			<div>
				<Form ref="myForm"
					{...{
						labelCol:{
							xs:{span:24},
							sm:{span:6},
						},
						wrapperCol:{
							xs:{span:24},
							sm:{span:18}
						},
					}}
					style = {{paddingBottom:10,margin:20}} labelAlign="right" >
						<Form.Item 
							label= "開始時間"
							style={{width:"25%",marginRight:0}}
							name="beginTime"
							rules= {[
									{
									  required: true,
									  message: '請選擇!',
									}]}
						 >
							<DatePicker 
							 showTime
							 locale={locale}
							 style={{width:195}}
							 placeholder="請選擇"
							 format="YYYY-MM-DD HH:mm:ss"
							/>
						</Form.Item>
						<Form.Item 
							label= "結束時間"
							style={{width:"25%",marginRight:0}}
							name = "endTime"
							rules= {[
								{
								  required: true,
								  message: '請選擇!',
								}]}
							>
							<DatePicker 
							 showTime
							 locale={locale}
							 style={{width:195}}
							 placeholder="請選擇"
							 format="YYYY-MM-DD HH:mm:ss"
							/>
						</Form.Item>
						<Form.Item
							label="姓名"
							style={{width:"25%",marginRight:0}}
							name = "userName"
						>
							<Input  placeholder="請選擇" />
						</Form.Item>
						<Form.Item
							style={{width:"25%",marginRight:0}}
						>
							<Button type="primary" htmlType="submit" onClick={this.getFormData}>
							    確定
						    </Button>
						</Form.Item>
				</Form>
				
			</div>
		)
	}
}
export default FormItem;