Reactjs 反应-父模式中的表单提交按钮

我有一个语义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>

从“语义ui反应”导入{Form}；
提交

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

我的模型如下所示：

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>

从“语义ui反应”导入{按钮，模态}；
我的标签
取消
{/*在此处插入提交按钮*/}

这种简单的方法正在发挥作用

我想做的是，当提交按钮显示在模式中时，将其放在

模式.Actions

部分内，否则在输入后立即保留

---

我不知道如何告诉我的表单submit按钮在它的父级中的某个位置。

我最终使用了ref。 我们的想法是在表单中创建一个ref，指向submit函数，并在props中有一个函数将这个ref传输到我的modal

模态：

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

const [submitFunc, setSubmitFunc] = useState();
const submitForm = () => {
    if (submitFunc) {
        submitFunc.current();
    }
};

<Modal open={true} size="large" centered>
    <Modal.Header>My Label</Modal.Header>
    <Modal.Content>
        <MyForm setSubmitFunc={setSubmitFunc} />
    </Modal.Content>
    <Modal.Actions>
        <Button>Cancel</Button>
        <Button onClick={submitForm}>Submit</Button>
    </Modal.Actions>
</Modal>

从“语义ui反应”导入{按钮，模态}；
常量[submitFunc，setSubmitFunc]=useState（）；
常量submitForm=（）=>{
if（submitFunc）{
submitFunc.current（）；
}
};
我的标签
取消
提交

表格：

function EditRecordForm({setSubmitFunc}) {
    const submitRef = useRef(null);
    useEffect(() => {
        if (!!setSubmitFunc) {
            setSubmitFunc(submitRef);
        }
    });

    const handleSubmit = () => {
        // Do whatever you need to retrieve form values and submit it
    }
    submitRef.current = handleSubmit;

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

函数EditRecordForm（{setSubmitFunc}）{
const submitRef=useRef（null）；
useffect（（）=>{
如果（！！setSubmitFunc）{
setSubmitFunc（提交人f）；
}
});
常量handleSubmit=（）=>{
//执行检索表单值并提交表单所需的任何操作
}
submitRef.current=handleSubmit；
返回(
提交
)
}