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传递给我的模态。

模式：

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

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

1 个答案: