使用react中antd design UI库from中的getFieldsValue，getFieldValue，validateFields，resetFields，getFieldDecorat

Posted 2020-12-08 jack-wangsir

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

  1 import React from ‘react‘;
  2 import { Card, Row, Col, Form, DatePicker, Select, Button, Checkbox, Table, Switch, message, Pagination, Input  } from ‘antd‘;
  3 const { Option } = Select;
  4 const FormItem = Form.Item;
  5 const formItemLayout = {    // label 和input宽度
  6     labelCol: { span:7 },
  7     wrapperCol: { span: 17 },
  8 };
  9 const formItemSwitch = {    // label 和input宽度
 10     labelCol: { span:11 },
 11     wrapperCol: { span: 13 },
 12 };
 13 
 14 const AccordingConsumption = Form.create()(
 15     class extends React.Component {
 16         constructor() {
 17             super();
 18             this.state = {
 19                 userInfo: JSON.parse(window.sessionStorage.userData),
 20                 data: [],
 21                 queryCondition: {},
 22                 SelectData: {},
 23                 inOpLocDr:‘‘,
 24                 vendor: ‘‘,
 25                 WaListData: [], //库存单数据
 26                 pageSize: 10,
 27                 page: 1,
 28                 total:0,
 29             };
 30         }
 31 
 32         //清空表格内容
 33         handleReset = () => {
 34             this.props.form.resetFields();
 35         };
 36 
 37         searchInformation=()=>{
 38             this.setState({page: 1},()=>{
 39                 this.getConsumptionList()
 40             })
 41         };
 42 
 43         // 获取库存单列表数据
 44         getConsumptionList=()=>{
 45             let data =  this.props.form.getFieldsValue();  //获取所以输入框的值
 46             console.log(‘data‘,data);
 47             let useDays = this.props.form.getFieldValue(‘useDays‘); //获取单个输入框的值
 48             console.log(‘useDays‘,useDays);
 49             this.props.form.validateFields((error, value)=>{  //获取所以输入框的值（value），并且获取到输入框是否报错(error)。
 50                 let obj = JSON.parse(JSON.stringify(value));
 51                 if(error == null){
 52                     console.log(obj)
 53                 }
 54             })
 55 
 56         };
 57 
 58         render() {
 59             const { getFieldDecorator } = this.props.form;
 60             //库存科室列表
 61             let inOpLocDrSelect = [];
 62             this.state.SelectData.loc && this.state.SelectData.loc.map((item, i) => {
 63                 inOpLocDrSelect.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
 64             });
 65 
 66             return (
 67                 <div className="accordingConsumption">
 68                     <Row>
 69                         <Card
 70                             size="small"
 71                             title="库存报警"
 72                         >
 73                             <Col span={19}>
 74                                 <Form>
 75                                     <Row >
 76                                         <Col span={5}>
 77                                             <FormItem {...formItemLayout} label="科室">
 78                                                 {getFieldDecorator(‘locDesc‘,{
 79                                                     initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
 80                                                     rules:[{ required : true, message: ‘科室不能为空‘}]
 81                                                 })(
 82                                                     <Select allowClear>
 83                                                         {inOpLocDrSelect}
 84                                                     </Select>
 85                                                 ) }
 86                                             </FormItem>
 87                                         </Col>
 88                                         <Col span={5}>
 89                                             <FormItem {...formItemLayout} label="开始日期">
 90                                                 {getFieldDecorator(‘StartDate‘,{
 91                                                     initialValue: undefined,
 92                                                 })(
 93                                                     <DatePicker format="YYYY-MM-DD" />
 94                                                 ) }
 95                                             </FormItem>
 96                                         </Col>
 97                                         <Col span={5}>
 98                                             <FormItem {...formItemLayout} label="结束日期">
 99                                                 {getFieldDecorator(‘EndData‘,{
100                                                     initialValue: undefined,
101                                                 })(
102                                                     <DatePicker  format="YYYY-MM-DD" />
103                                                 ) }
104                                             </FormItem>
105                                         </Col>
106                                         <Col span={4}>
107                                             <FormItem {...formItemSwitch} label="用药天数">
108                                                 {getFieldDecorator(‘useDays‘,{
109                                                     initialValue: undefined,
110                                                 })(
111                                                    <Input />
112                                                 ) }
113                                             </FormItem>
114                                         </Col>
115                                         <Col span={5}>
116                                             <FormItem {...formItemSwitch} label="包含不可用品种">
117                                                 {getFieldDecorator(‘incNotFlag‘,{
118                                                     valuePropName: ‘checked‘,
119                                                     initialValue: false,
120                                                     rules:[{required: false}]
121                                                 })(
122                                                     <Switch checkedChildren="是" unCheckedChildren="否" />
123                                                 ) }
124                                             </FormItem>
125                                         </Col>
126                                     </Row>
127                                 </Form>
128                             </Col>
129                             <Col span={5}>
130                                 <Row style={{marginBottom: ‘18px‘}} className="button">
131                                     <Button style={{marginRight: ‘30px‘}} onClick={this.searchInformation}>查询</Button>
132                                     <Button type="primary" onClick={this.handleReset}>清屏</Button>
133                                 </Row>
134                             </Col>
135 
136                         </Card>
137                     </Row>
138                 </div>
139             )
140         }
141     }
142 );
143 export default AccordingConsumption;