getFieldsValue,getFieldValue,validateFields,resetFields,getFieldDecorator的用法;

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;
原文地址:https://www.cnblogs.com/zxm1993/p/11423866.html