reactjs - 如何动态定位 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>