react antd From 表单 提交（用modal对话的按钮提交from表单每一项）

react antd From 表单 提交

场景：用modal对话的按钮提交from表单每一项

import { Button, Modal, Form, Input, DatePicker, Select, Col, Row, Popconfirm, Table } from 'antd';
//useRef 使用useRef
import { useEffect, useState, useRef } from 'react';
import type { SelectProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';





function detailsDialog(props: any) {
  const [isModalOpen, setIsModalOpen] = useState(false);//弹窗显示隐藏
  const [componentDisabled, setComponentDisabled] = useState<boolean>(true);//表单禁用
  const fromRef = useRef<any>()//*************************************
  //点击确定
  const handleOk = (value:any) => {
    fromRef.current?.submit()//*************************************
    setIsModalOpen(false);
  };
  //点击取消
  const handleCancel = () => {
    props.closeDetail()
  };



  return (
    <>
      <Modal
        title='处方详情'
        maskClosable={false}
        width={1000}
        open={props.mode}
        onCancel={handleCancel}
        onOk={handleOk}
      >
        </div>
        <Form
          ref={fromRef}
          labelCol={{ span: 4 }}
          onFinish={(v:any)=>{
            console.log(454,v)
          }}//*************************************
          wrapperCol={{ span: 18 }}
          disabled={componentDisabled}
        >
          <Row>
            <Col span={12}>
              <Form.Item
                label="名称"
                name="name"
                rules={[{ required: true, message: '请输入' }]}
              >
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="开方日期"
                name="data"
                rules={[{ required: true, message: '请输入' }]}
              >
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  );
}

export default detailsDialog;