本文介绍如何在 ant design 中既通过自定义按钮控制 popover 显隐，又不破坏其原生点击触发与失焦隐藏的默认行为，关键在于合理结合 `visible` 受控模式与 `onvisiblechange` 回调。
在 Ant Design 中，Popover 默认支持 trigger="click" 时：点击触发区域（即子元素）显示弹层，点击弹层外部自动隐藏。但若直接使用 visible 属性完全受控（如仅靠按钮切换），会丢失“点击内容显示、点击外部隐藏”的原生交互逻辑——因为受控组件不再响应内部触发事件。
正确解法是：保持 trigger="click"，同时将 visible 设为受控状态，并通过 onVisibleChange 同步内外部触发引起的状态变更。
这样既能响应按钮点击，也能响应用户对 Popover 触发区或遮罩层的自然操作。
以下是完整实现示例：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
✅
关键要点说明：
的子元素（此处为
import React, { useState } from 'react';
import { Button, Popover } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
const handleTogglePopover = () => {
setVisible(!visible);
};
const content = (
This is the content of the Popover
Clicking inside the Popover won't hide it.
);
return (
);
};
export default App;