大家好，我最近在开发React项目时遇到了一个头疼的问题：我在Ant Design的模态框里嵌套了一个表单，点击提交按钮后完全没有反应，也看不到任何错误提示，实在找不到问题出在哪里。

我的组件里包含两个表单，主表单正常显示在页面中，当用户点击按钮打开模态框后，需要在模态框里提交第二个表单。我已经给模态框的提交按钮绑定了modalForm.submit()，也给表单设置了onFinish方法，但就是触发不了提交逻辑。

以下是我的完整组件代码：

import { useState } from 'react';
import { Card, Form, Select, Button, Modal, Input } from 'antd';

const SingleTransfer = () => {
  const [form] = Form.useForm();
  const [modalForm] = Form.useForm();
  const [bankLoading, setBankLoading] = useState(false);
  const [loading, 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>
  );
};

export default SingleTransfer;

我已经检查了表单的规则设置、提交按钮的事件绑定，但还是没发现问题。有没有大佬能帮忙看看，为什么模态框里的表单无法提交呢？

备注：内容来源于stack exchange，提问作者etranz