模式内的antd表单未在reactjs中提交

Question

我正在尝试在模式表单内提交表单，但该表单未提交且未显示任何错误。

我的组件有两种形式。当用户单击按钮时，它会打开模式，以便用户可以在第二个表单中提交按钮

const SingleTransfer = () => { const [form] = Form.useForm(); const [modalForm] = Form.useForm(); const [bankLoading, setBankLoading] = useState(false) const [正在加载，setLoading] = useState(false)

const [open, setOpen] = useState(false);


const showModal = () => {
    setOpen(true);
};

const handleCancel = () => {
    setOpen(false);
};

const handleSubmit = (values) => {
    console.log("values ", values)
}
return (
    <div>

        <Card title="Single Transfer">

            <Form
                form={form}
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                initialValues={{
                    remember: true,
                }}
            >

                {bankLoading && (
                    <Form.Item>

                        <div>
                            Loading banks. Please Wait...
                        </div>
                    </Form.Item>)}
                <Form.Item
                    label="Bank Name"
                    name="bank_code"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your bank name!',
                        },
                    ]}
                >
                    <Select
                        showSearch
                        placeholder="Select a Bank"
                        optionFilterProp="children"
                    />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>


            <Button type="primary" onClick={showModal}>
                Open Modal with customized footer
            </Button>

这是模态中的第二种形式。

            <Modal
                form={modalForm}
                forceRender={true}
                getContainer={false}
                open={open}
                title="Pin"
                onOk={form.submit}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        Cancel
                    </Button>,
                    <Button key="submit" type="primary" htmlType='submit' loading={loading} onClick={modalForm.submit}>
                        Submit
                    </Button>
                ]}
            >
                <Form
                    name="basics"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    autoComplete="off"
                    onFinish={handleSubmit}
                >


                    <Form.Item
                        label="Pin"
                        name="pin"
                        rules={[
                            {
                                required: true,
                                message: 'Please enter your Pin!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                    </Form.Item>
                </Form>

            </Modal>
        </Card>
    </div>
)

}

导出默认 SingleTransfer

Answer 1

将提交按钮从

footer

数组移到

Form

作为最后一个子项，同时用

<Form.Item>

包裹它并删除

onClick

道具，就像这样

<Form>
  ...
  <Form.Item>
    <Button key="submit" type="primary" htmlType='submit' loading={loading}>
      Submit
    </Button>
  <Form.Item>
</Form>

在您的代码中，表单对提交按钮并不“熟悉”，因此单击它不会触发提交回调。