首页 > 其他分享> > 使用react中antd design UI库from中的getFieldsValue，getFieldValue，validateFields，resetFields，getFieldDecorat
使用react中antd design UI库from中的getFieldsValue，getFieldValue，validateFields，resetFields，getFieldDecorat
作者：互联网
一.关于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;
标签：initialvalue,const,getFieldDecorator,getFieldValue,state,form,props,useDays 来源： https://www.cnblogs.com/jack-wangsir/p/13062184.html