使用react中antd design UI库from中的getFieldsValue，getFieldValue，validateFields，resetFields，getFieldDecorator,initialvalue的用法

一.关于react中from表单中getFieldsValue，getFieldValue，validateFields，resetFields，getFieldDecorator,initialvalue的用法

import React from 'react';
import { Card, Row, Col, Form, DatePicker, Select, Button, Checkbox, Table, Switch, message, Pagination, Input  } from 'antd';
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
    labelCol: { span:7 },
    wrapperCol: { span: 17 },
};
const formItemSwitch = {    // label 和input宽度
    labelCol: { span:11 },
    wrapperCol: { span: 13 },
};

const AccordingConsumption = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: JSON.parse(window.sessionStorage.userData),
                data: [],
                queryCondition: {},
                SelectData: {},
                inOpLocDr:'',
                vendor: '',
                WaListData: [], //库存单数据
                pageSize: 10,
                page: 1,
                total:0,
            };
        }

        //清空表格内容
        handleReset = () => {
            this.props.form.resetFields();
        };

        searchInformation=()=>{
            this.setState({page: 1},()=>{
                this.getConsumptionList()
            })
        };

        // 获取库存单列表数据
        getConsumptionList=()=>{
            let data =  this.props.form.getFieldsValue();  //获取所以输入框的值
            console.log('data',data);
            let useDays = this.props.form.getFieldValue('useDays'); //获取单个输入框的值
            console.log('useDays',useDays);
            this.props.form.validateFields((error, value)=>{  //获取所以输入框的值（value），并且获取到输入框是否报错(error)。
                let obj = JSON.parse(JSON.stringify(value));
                if(error == null){
                    console.log(obj)
                }
            })

        };

        render() {
            const { getFieldDecorator } = this.props.form;
            //库存科室列表
            let inOpLocDrSelect = [];
            this.state.SelectData.loc && this.state.SelectData.loc.map((item, i) => {
                inOpLocDrSelect.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
            });

            return (
                <div className="accordingConsumption">
                    <Row>
                        <Card
                            size="small"
                            title="库存报警"
                        >
                            <Col span={19}>
                                <Form>
                                    <Row >
                                        <Col span={5}>
                                            <FormItem {...formItemLayout} label="科室">
                                                {getFieldDecorator('locDesc',{
                                                    initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
                                                    rules:[{ required : true, message: '科室不能为空'}]
                                                })(
                                                    <Select allowClear>
                                                        {inOpLocDrSelect}
                                                    </Select>
                                                ) }
                                            </FormItem>
                                        </Col>
                                        <Col span={5}>
                                            <FormItem {...formItemLayout} label="开始日期">
                                                {getFieldDecorator('StartDate',{
                                                    initialValue: undefined,
                                                })(
                                                    <DatePicker format="YYYY-MM-DD" />
                                                ) }
                                            </FormItem>
                                        </Col>
                                        <Col span={5}>
                                            <FormItem {...formItemLayout} label="结束日期">
                                                {getFieldDecorator('EndData',{
                                                    initialValue: undefined,
                                                })(
                                                    <DatePicker  format="YYYY-MM-DD" />
                                                ) }
                                            </FormItem>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem {...formItemSwitch} label="用药天数">
                                                {getFieldDecorator('useDays',{
                                                    initialValue: undefined,
                                                })(
                                                   <Input />
                                                ) }
                                            </FormItem>
                                        </Col>
                                        <Col span={5}>
                                            <FormItem {...formItemSwitch} label="包含不可用品种">
                                                {getFieldDecorator('incNotFlag',{
                                                    valuePropName: 'checked',
                                                    initialValue: false,
                                                    rules:[{required: false}]
                                                })(
                                                    <Switch checkedChildren="是" unCheckedChildren="否" />
                                                ) }
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                            </Col>
                            <Col span={5}>
                                <Row style={{marginBottom: '18px'}} className="button">
                                    <Button style={{marginRight: '30px'}} onClick={this.searchInformation}>查询</Button>
                                    <Button type="primary" onClick={this.handleReset}>清屏</Button>
                                </Row>
                            </Col>

                        </Card>
                    </Row>
                </div>
            )
        }
    }
);
export default AccordingConsumption;