本文介绍如何在 ant design 中既通过自定义按钮控制 popover 显隐，又不破坏其原生点击触发与失焦隐藏的默认行为，关键在于合理结合 `visible` 受控模式与 `onvisiblechange` 回调。
在 Ant Design 中，Popover 默认支持 trigger="click" 时：点击触发区域（即子元素）显示弹层，点击弹层外部自动隐藏。但若直接使用 visible 属性完全受控（如仅靠按钮切换），会丢失“点击内容显示、点击外部隐藏”的原生交互逻辑——因为受控组件不再响应内部触发事件。
正确解法是：保持 trigger="click"，同时将 visible 设为受控状态，并通过 onVisibleChange 同步内外部触发引起的状态变更。 这样既能响应按钮点击，也能响应用户对 Popover 触发区或遮罩层的自然操作。
以下是完整实现示例：
import React, { useState } from 'react';
import { Button, Popover } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
const handleTogglePopover = () => {
setVisible(!visible);
};
const content = (
<div>
<p>This is the content of the Popover</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2268" title="AI Code Reviewer"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/68b6b69145e34946.png" alt="AI Code Reviewer" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2268" title="AI Code Reviewer">AI Code Reviewer</a>
<p>AI自动审核代码</p>
</div>
<a href="/ai/2268" title="AI Code Reviewer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>Clicking inside the Popover won't hide it.</p>
</div>
);
return (
<div>
<Popover
content={content}
visible={visible}
trigger="click"
onVisibleChange={setVisible} // ✅ 关键：统一收口所有显隐来源（按钮、点击触发区、点击外部）
>
<Button onClick={handleTogglePopover}>Toggle Popover</Button>
</Popover>
</div>
);
};
export default App;✅ 关键要点说明：
的子元素（此处为 - onVisibleChange={setVisible} 确保无论显隐由谁发起（按钮、触发区点击、外部点击），状态都同步更新，避免视图与状态不一致；
- 不要省略 trigger="click"，否则 Popover 将无法响应点击触发区或外部点击，仅依赖按钮控制，失去“默认行为”；
- 若需禁用触发区点击（如只允许按钮控制），应改用 trigger="manual" 并自行管理全部逻辑，但这不符合本题“保留默认行为”的要求。
? 进阶提示：
如需区分触发来源（例如仅在按钮点击时执行特定逻辑），可在 onVisibleChange 中结合额外标记或 useRef 记录上一次操作源，但多数场景下统一处理已足够健壮。
综上，通过 visible + onVisibleChange + trigger="click" 三者协同，即可优雅实现“按钮可控 + 默认交互并存”的 Popover 行为。
