react 使用ant design 的Form组件，表单如何收集？

废话不多说直接上代码加截图说明

/*
 * @Author: faqaing.zhang@hand-china.com
 * @Date: 2021-08-30 15:37:28
 * @LastEditors: faqaing.zhang@hand-china.com
 * @LastEditTime: 2021-08-31 10:10:39
 * @Version: 1.0.0
 * @Description: 
 * @Copyright: Copyright (c) 2021, Hand-RongJing
 */

import React, { Component } from 'react'
import { Form } from '@ant-design/compatible';
import { Input, Button, Select } from 'antd';

const databaseTypeConst = [
    { key: 1, code: "orcale", name: "orcale" },
    { key: 2, code: "mysql", name: "mysql" },
    { key: 3, code: "DB2", name: "DB2" },
    { key: 4, code: "SQLServer 2000", name: "SQLServer 2000" },
    { key: 5, code: "SQLServer 2005", name: "SQLServer 2005" },
];


@Form.create()
export default class TestFormData extends Component {

    constructor(props) {
        super(props);

        this.state = {
            formData: {}
        }

    }

    handSubmit = () => {

     
        const { form } = this.props
        form.validateFields((err, fieldsValue) => {
            debugger
        })
      
    }

    render() {

        const { form: { getFieldDecorator }, } = this.props

        return (
            <div>
                
                <Form
                    layout='vertical'
                    name="formData"

                >
                    <Form.Item
                        name='username'
                        label='名字'
                        id="username"
                    >
                        {getFieldDecorator("username", {
                        })(
                            < Input  placeholder='请输入名字' allowClear />
                        )}
                    </Form.Item>

                    <Form.Item
                        label='年龄'
                        rules={[
                            {
                                required: true,
                                validator: (rule, value, callback) => this.handleAge(rule, value, callback),
                                validateTrigger: ['onBlur', 'onChange']
                            }
                        ]}
                    >
                        {getFieldDecorator("age", {
                        })(
                            <Input placeholder='请输入年龄' allowClear onChange={this.handSaveData} />
                        )
                        }
                    </Form.Item>

                    <Form.Item>
                        {getFieldDecorator("like",{

                        })(
                            <Select placeholder="请选择">
                                <Select.Option key="1" value="db">数据库</Select.Option>
                                <Select.Option key="2" value="url">链接</Select.Option>
                            </Select>
                        )}
                    </Form.Item>

                    <Form.Item>
                        <Button type='submit' onClick={this.handSubmit}>保存</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

 

要想使用this.props.form...的方法 必须得使用@Form.create()这个在类上边,或者使用 export default (Form.create()(TestFormData)),作用是让该类挂载一个form的属性;

以下为代码的实现的截图 

 

 

它能成功的获取到值是因为我们在getFieldDecorator这个地方给当前组件设置了它的name，所以form这个属性会帮我们自动收集，就再也不会使用监听或打ref的方式去获取值了