如何动态定位 IonPopover 以从按钮出现？

Question

当单击该按钮时，我试图将弹出框放置在该按钮下方。这方面的一个例子在 Ion 文档页面上。

然而，React 中不提供此代码，仅在 Angular 中提供。

目前我的代码看起来像这样

...
<IonButtons slot="end">
                        <IonButton onClick={() => setShowPopover(true)} expand="block">
                            <IonIcon icon={more}/>
                        </IonButton>
                    </IonButtons>
                    <IonPopover
                        isOpen={showPopover}
                        backdropDismiss={true}
                        onDidDismiss={() => setShowPopover(false)}>
                        <IonItem>Popover Item</IonItem>
                    </IonPopover>
...

弹出框由其上方的按钮切换。当按钮被按下时，弹出框出现在页面中间，而不是按钮上方。如何更改此设置以便弹出框显示在按钮上？（就像图片一样）

谢谢

Answer 1

受到 Thomas 回答的启发，但无法使他的代码正常工作，以下对我有用：

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>