react useModal自定义弹窗代码

import type { ModalProps } from 'antd';
import { Modal } from 'antd';
import type { FormInstance } from 'antd/es/form';
import React, { useState } from 'react';

const useFormModal = (modalProps: ModalProps, Slot: React.FC<any>) => {
  const [visible, setVisible] = useState(false);
  const open = () => {
    setVisible(true);
  };
  const close = () => {
    setVisible(false);
  };
  const FormModal = (slotProps: any) => {
    const onCancel = () => {
      close();
    };

    const ref = React.useRef<FormInstance>();
    const ok = () => {
      ref.current?.submit();
    };
    return (
      <Modal onCancel={onCancel} onOk={ok} visible={visible} okText="提交" width={800} {...modalProps}>
        <Slot ref={ref} {...slotProps} afterSubmit={close} />
      </Modal>
    );
  };

  return {
    FormModal,
    open,
  };
};
export default useFormModal;

use

import {  Button } from 'antd';
import useFormModal from './coupon-modal';

export default ()=>{
  const { open, FormModal: UserModal } = useFormModal(
    { title: '新建用户' },
    React.forwardRef(() => <div>弹窗内容啦啦啦-自定义</div>)
  );
  function handleOpen() {
    open();
  }
return <>
{/* 点击打开弹窗 */}
<Button type="primary" onClick={handleOpen}>打开弹窗</Button>
   
{/* 弹窗 */}
<UserModal />

</>
}