api和封装，让Modal组件使用更加便捷

最近有个页面，用到多个Modal，于是好几对[isVisible, setIsVisible] = useState(false);，以及确定、取消事件。

嫌麻烦~，仔细查下官网

简单的 Modal，可以使用 api

简单的 modal，直接使用api 调用，最最方便的！

Modal.info({
  title: 'This is a notification message',
  content: (
    <div>
      <p>some messages...some messages...</p>
    </div>
  ),
  onOk() {},
});

• Modal.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.confirm

复杂些的 Modal，封装成组件

复杂些，封装到一个组件里，逻辑自洽。

使用的时候xxRef.current.open()

封装也很简单:

import { useImperativeHandle, useState, forwardRef } from 'react';
import { Modal } from 'antd';
const ModalCreate = forwardRef((props, ref) => {
  const [isVisible, setIsVisible] = useState(false);
  const close = () => {
    setIsVisible(false);
  };
  // 只暴露想暴露的方法
  useImperativeHandle(ref, () => ({
    open: () => {
      setIsVisible(true);
    },
    close,
  }));

  return (
    <Modal title="Basic Modal" open={isVisible} onOk={close}>
      内容
    </Modal>
  );
});
export default ModalCreate;

使用的时候

import ModalCreate from '...';

const modalCreateRef = useRef();

modalCreateRef.current.open();

<ModalCreate ref={modalCreateRef} />;

注意事项

• <Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置destroyOnClose`。

• <Modal /> 和Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置 <Form preserve={false} />。

• Modal.method() RTL 模式仅支持 hooks 用法。