How to submit form component in modal dialogue using antd react component library

Question

In my component's render method I have antd Modal component as a parent and antd Form component as a child:

    render() {
        const myForm = Form.create()(AddNewItemForm);
        ...
        return (
            ...
            <Modal
                title="Create new item"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                wrapClassName="vertical-center-modal"
                okText="Save new item"
                width="600"
            >
                <myForm />
            </Modal>
...

How can I submit my form by clicking the Modals Save button?

Answer 1

There is a new solution that looks much cleaner:

<Form id="myForm">

...

<Modal
    ...
    footer={[
        <Button form="myForm" key="submit" htmlType="submit">
            Submit
        </Button>
        ]}
>
    <CustomForm />
</Modal>

This works because of the Button's form attribute. Browser support

Original solution's author: https://github.com/ant-design/ant-design/issues/9380

Answer 2

You can study official example: https://ant.design/components/form/#components-form-demo-form-in-modal