Реагировать - кнопка отправки формы в родительском модале

Question

У меня есть форма семантического пользовательского интерфейса:

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

Мне, наконец, удалось сделать это с помощью ссылки.Идея состоит в том, чтобы создать ссылку в форме, указывающую на функцию отправки и имеющую функцию в реквизите для передачи этого ссылки в мой модал.

Модал:

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>

Форма:

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>
    )
}