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;