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
用法。