问题描述:
如上图所示,我的提示modal 关不掉了,思考问题症结在handleVisibleChange
const content = (
<div className={styles.box}>
别的样式
</div>
{/* 链接 */}
<div className={styles.linkBox}>
<Modal
title={'提示'}
open={resetModalVisible} // resetModalVisible是控制弹窗的
onOk={handleOk}
onCancel={() => setResetModalVisible(false)}
>
<p>提示的文字</p>
</Modal>
</div>
</div>
);
<Popover
content={content}
placement="bottomRight"
trigger="click"
open={visible}
onOpenChange={handleVisibleChange} // 重点在这里,因为更新版本后,modal的z-index在Popover之上了,点击外边会先关掉Popover的content,而不是关掉modal,所以在这里处理
>
<Button style={style} className={className}>
分享
</Button>
</Popover>
</>
修改逻辑如下,就可以正常关闭弹窗了
const handleVisibleChange = useCallback(
(visible: boolean) => {
!resetModalVisible && setVisible(visible);
},
[ resetModalVisible]
);