问题描述:
如上图所示,我的提示modal 关不掉了,思考问题症结在handleVisibleChange
const content = (<div className={styles.box}>别的样式</div>{/* 链接 */}<div className={styles.linkBox}><Modaltitle={'提示'}open={resetModalVisible} // resetModalVisible是控制弹窗的onOk={handleOk}onCancel={() => setResetModalVisible(false)}><p>提示的文字</p></Modal></div></div>);<Popovercontent={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]);