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

·  阅读 1219

最近有个页面,用到多个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 用法。

分类:
前端
收藏成功!
已添加到「」, 点击更改