ant desgin 项目中 弹框modlel 模态框中展示 form 表单 将 form 表单 的提交按钮 关联到 模态框的 确定按钮上 在hook的写法中 在 class 的组件中 要加上 this

jsx 中的的弹框
        <Modal
            confirmLoading={true}
            width={1000}
            style={{ textAlign: 'center' }}
            title={intitlebiao}
            visible={invisible}
            okText="提交"
            footer={
              isock ? null : (
                <Button type="primary" onClick={() => handleOkincov()}>
                  提交
                </Button>
              )
            }
            // onOk={handleOkincov}
            onCancel={handleCancelincov}
          >
            <Form {...formItemLayout}>
              <Row type="flex" gutter={16}>
                <Col span={12}>
                  <Form.Item label="银行账号">
                    {getFieldDecorator('bankAccount', {
                      initialValue: listinvoc.bankAccount,
                      rules: [
                        {
                          required: true,
                          message: '请输入银行账号',
                        },
                      ],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="银行名称">
                    {getFieldDecorator('bankName', {
                      initialValue: listinvoc.bankName,
                      rules: [
                        {
                          required: true,
                          message: '请输入银行名称',
                        },
                      ],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="公司地址">
                    {getFieldDecorator('companyAddress', {
                      initialValue: listinvoc.companyAddress,
                      rules: [
                        {
                          required: true,
                          message: '请输入公司地址',
                          whitespace: true,
                        },
                      ],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="税号">
                    {getFieldDecorator('taxNumber', {
                      initialValue: listinvoc.taxNumber,
                      rules: [
                        {
                          required: true,
                          message: '请输入税号',
                          whitespace: true,
                        },
                      ],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="电话">
                    {getFieldDecorator('telephone', {
                      initialValue: listinvoc.telephone,
                      rules: [{ required: true, message: '请输入电话', whitespace: true }],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="名称">
                    {getFieldDecorator('title', {
                      initialValue: listinvoc.title,
                      rules: [{ required: true, message: '请输名称', whitespace: true }],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="邮箱">
                    {getFieldDecorator('email', {
                      initialValue: listinvoc.email,
                      rules: [{ required: true, message: '请输入邮箱', whitespace: true }],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="备注">
                    {getFieldDecorator('memo', {
                      initialValue: listinvoc.memo,
                      // rules: [{ required: true, message: '请输入备注', whitespace: true }],
                    })(<Input disabled={isock} />)}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Modal>

　　点击 模态框 的确定按钮  关联到  form 表单的提交按钮  获取数据

 // 开票模态框-----------------------------------------------------
  const handleOkincov = () => {
    const {
      form: { validateFields },
    } = props;
    validateFields((err, values) => {
      if (!err) {
        const orderId = props.location.query && props.location.query.orderId;
        let { create_user, hotel_group_id, hotel_id, id, modify_user } = JSON.parse(
          sessionStorage.getItem('currentUser'),
        );
        // 进行提交请求
        loggingdatatijiao({
          ...values,
          create_user,
          hotel_group_id,
          hotel_id,
          id,
          modify_user,
          status,
          order_info_id: orderId,
        }).then(res => {
          // console.log(res);
          if (res && res.code !== Constants.SUCCESS)
            return message.warning(res.message || '提交失败');
          message.success(res.message || '提交成功');
          setInvisible(false);
        });
      }
    });
  };

  const { getFieldDecorator } = props.form;

  const [formItemLayout] = useState({

    labelCol: {

      xs: { span: 12 },

      sm: { span: 8 },

    },

    wrapperCol: {

      xs: { span: 12 },

      sm: { span: 16 },

    },

  });

　　也可以参考 ： https://www.yuque.com/ant-design/course/up1dn3