reactjs - 带有 React 的 Ionic popover - 如何使其粘在按钮上
问题描述
按照离子文档,我试图让弹出框粘在按钮上(就像他们自己的例子一样)。不幸的是,我不知道如何实现这一点......谢谢
import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';
export const PopoverExample: React.FC = () => {
const [showPopover, setShowPopover] = useState(false);
return (
<>
<IonPopover
isOpen={showPopover}
onDidDismiss={e => setShowPopover(false)}
>
<p>This is popover content</p>
</IonPopover>
<IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
</>
);
};
解决方案
您还需要在 showPopover 挂钩中包含一个事件 -
const [showPopover, setShowPopover] = useState<{open: boolean, event: Event | undefined}>({
open: false,
event: undefined,
});
<IonPopover
isOpen={showPopover.open}
event={showPopover.event}
onDidDismiss={e => setShowPopover({open: false, event: undefined})}
>
<p>This is popover content</p>
</IonPopover>
<IonButton onClick={(e) => setShowPopover({open: true, event: e.nativeEvent})}>Click</IonButton>
推荐阅读
- java - 如何让按钮用完 BorderLayout 中的所有空间,不留空白?
- selenium - 谷歌仍然支持硒测试谷歌地图吗?
- node.js - 我无法在 Angular7 中使用“ng new myworkspace”命令创建工作区。可能是什么原因
- php - Laravel 和 MySQL 按周获取数据
- apache - 403 Forbidden on CORS request from local
- wkhtmltopdf - 使用 wkhtmltopdf.exe 渲染丑陋的 Arial 字体
- kubernetes - 供应 IBM Cloud Kubernetes 服务所需的用户权限
- c++ - Windows:如何解决缺少的过程入口点以实现向后兼容性?
- model-view-controller - 模型视图... 适用于 Blazor
- c# - 页面不断加载,Google Calendar API