title | group | order | ||||
---|---|---|---|---|---|---|
内部关闭(回调) |
|
5 |
在 issue#18 中,遇到需求是内部关闭操作无法执行onClean/onClose
方法。想了几个方案都不太满意。最终绕了一圈解决:
内部调用的地方传入一个需要触发的回调函数名即可。后面参数则是该函数的执行参数。
import { Button } from 'antd';
import type { ModalContentPropsWithEnhanced } from 'easy-antd-modal';
import React from 'react';
const ContentForm: React.FC<ModalContentPropsWithEnhanced> = ({ enhancedAction }) => {
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
enhancedAction?.close('onCancel', event); // <=== 关键改动
}
return <Button onClick={handleClick}>Close</Button>;
};
export default ContentForm;
:::warning
请注意 <Modal />
的关闭回调是 onCancel, 而 <Drawer />
是 onClose.
:::
import { Button } from 'antd';
import type { DrawerContentPropsWithEnhanced } from 'easy-antd-modal';
import React from 'react';
const ContentForm: React.FC<DrawerContentPropsWithEnhanced> = ({ enhancedAction }) => {
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
enhancedAction?.close('onClose', event); // Drawer 的回调是 onClose
}
return <Button onClick={handleClick}>Close</Button>;
};
export default ContentForm;
条条大路通罗马, 确实直接 props 传递下去更直观(前提是你已经用了受控模式), 但是具体情况需要具体分析 🧐