React-父模态中的表单提交按钮

Question

我有一个语义UI表单：

import {Form} from 'semantic-ui-react';

<MyForm>
    <Form onSubmit={_handleSubmit}>
        <Form.Input name="myInput" label="My Label" value="" />
        <Form.Group>
            <Form.Button>Submit</Form.Button>
        </Form.Group>
    </Form>
</MyForm>

此表单可以在模式内显示，也可以直接在我的应用程序的标准视图中显示

我的模态看起来像这样：

import {Button, Modal} from 'semantic-ui-react';

<Modal open={true} size="large" centered>
    <Modal.Header>My Label</Modal.Header>
    <Modal.Content>
        <MyForm />
    </Modal.Content>
    <Modal.Actions>
        <Button className="close-button">Cancel</Button>
        {/* Insert submit button here*/}
    </Modal.Actions>
</Modal>

此简单方法有效。

我想做的是，将以模态显示时Modal.Actions部分中的提交按钮，并在输入后立即保留它。

我不知道如何告诉我的表单，提交按钮位于其父控件的某个位置。

Answer 1

我终于设法使用ref。这个想法是在表单中创建一个ref，指向Submit函数，并在props中具有一个函数，以将该ref传递给我的模态。