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()方法。

代码实现如下：

100

101

102

103

104

105

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;