Antd如何通过父组件直接获取子组件内表单值

在react开发过程中，难免会遇到在父组件中获取子组件中的值，如在创建一个对话框提交表单的时候，我们应该怎么来实现通过点击antd 中modal组件的确定按钮获取表单的值去发送AJAX，下面直接上代码：

子组件：

import React, { Component } from "react";
import { Form, Input } from 'antd';

class BaseForm extends Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="设备名称">
                    {getFieldDecorator("equipmentName")(<Input />)}
                </Form.Item>
                <Form.Item label="设备类型">
                    {getFieldDecorator("type")(<Input />)}
                </Form.Item>
                <Form.Item label="设备测试">
                    {getFieldDecorator("test")(<Input />)}
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(BaseForm)

父组件:

import React, { Component } from "react";
import { Modal } from "antd";
import BaseForm from "./components/baseForm";

class componentName extends Component {
    state = {
        visible: false
    };
    render() {
        const { visible } = this.state;
        return (
            <div>
                <Modal
                    bodyStyle={{ maxHeight: "500px", overflowY: "scroll" }}
                    title="title"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={() => this.setState({ visible: false })}
                >
                    <BaseForm wrappedComponentRef={this.saveFormRef} />
                </Modal>
            </div>
        );
    }

    // 通过wrappedComponentRef获取子组件的ref
    saveFormRef = formRef => {
        this.formRef = formRef;
    };

    handleOk = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, fieldsValue) => {
            if (!err) {
                console.log(fieldsValue);
            }
        });
    };
}

export default componentName;

总结：通过antd官方文档给出的wrappedComponentRef去绑定子组件的ref实现父组件获取子组件表单值，至此，我们就可以获取到我组件中的值了，当然我们也可以把form表单和Modal对话框都封装成一个通用的组件，使用起来会更加的方便。