antd modal的onOk提交form表单

方法一：

import React, { Component } from 'react'
import { Modal, Form, Input, Button } from 'antd'
import FormModal from './SharedForm'

class SharedFormModal extends Component {
    state = { visible: true, }
    showModelHandler = (e) => {
        if (e) e.stopPropagation()
        this.setState({ visible: true, })
    }
    hideModelHandler = () => {
        this.setState({ visible: false, })
    }
    handleSubmit = (values) => {
       console.log("values",values);    
       this.setState({ visible: false, })
    };
    onFinishForm = (values) => {
        console.log("onFinishForm", values);
    }
    render() {
        const { children, trigger ,param} = this.props

        return (
            <span>
                <span onClick={this.showModelHandler}>
                    {trigger}
                </span>
                <Modal title={this.props.name || ''}
                    visible={this.state.visible}
                    onOk={this.handleSubmit}
                    onCancel={this.hideModelHandler}
                    okButtonProps={{htmlType: 'submit', form: 'editForm'}}
                >
                    <FormModal
                        formId="editForm"
                        onSubmit={this.handleSubmit}
                    />
                </Modal>
            </span>
        )
    }
}
export default SharedFormModal

form

import React, { Component, PropTypes } from 'react'
import { Form, Input, InputNumber } from 'antd'

class SharedForm extends Component {
    handleSubmit = (value) => {
        console.log("formId",value);
    }

    render() {
        // const children = this.props.children || [];
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const formId = this.props.formId;
        console.log("id",formId);
        const layout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        };

        const form = {}


        return (
            <Form id ={formId} layout="horizontal" onFinish={this.handleSubmit}>
                <Form.Item name='name' label="Name" rules={[{ isRequired: true }]} >
                    <Input />
                </Form.Item>
                <Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
                    <InputNumber />
                </Form.Item>
                <Form.Item name={['user', 'website']} label="Website">
                    <Input />
                </Form.Item>
                <Form.Item name={['user', 'introduction']} label="Introduction">
                    <Input.TextArea />
                </Form.Item>
            </Form>
        )
    }
}
export default SharedForm;

方法二：

madol;

import React, { Component, useState, useRef } from 'react'
import { Modal, Form, Input } from 'antd'
import FormDemo from './FormDemo'

export default () => {
    const [visible, setVisible] = useState(true);

    const form = useRef();

    const showModelHandler = (e) => {
        if (e) e.stopPropagation()
        setVisible(true);
    }
    const hideModelHandler = () => {
        setVisible(false);
    }
    const handleSubmit = (values) => {
        console.log("form", form)
        form.current.getValue()
        setVisible(false);
    };

    return (
        <span>
            <Modal
                title={''}
                visible={visible}
                onOk={handleSubmit}
                onCancel={hideModelHandler}
            >
                <FormDemo ref={form} />
            </Modal>
        </span>
    )
}

form:

import React, { Component, PropTypes, useImperativeHandle, forwardRef } from 'react'
import { Form, Input, InputNumber } from 'antd'

function FormDemo(props, ref) {
    const [form] = Form.useForm();

    useImperativeHandle(ref, () => ({
        getValue: () => {
            form.validateFields().then((values) => {
                console.log("values", values);
            })
        }
    }));

    return (
        <Form layout="horizontal" form={form}>
            <Form.Item name='name' label="Name" rules={[{ isRequired: true }]} >
                <Input />
            </Form.Item>
        </Form>
    )
}

export default forwardRef(FormDemo)