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

来自the docs：

To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the present method. If the event is not passed, the popover will be positioned in the center of the viewport.

所以需要将click事件传递给popover的event 属性.

我从未看过 React，但您也许可以将其添加到状态中：

更新示例：

import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';

export const PopoverExample: React.FC = () => {
  const [showPopover, setShowPopover] = useState<{open: boolean, event: Event | null}>({
    open: false,
    event: null,
  });

  return (
    <>
      <IonPopover
        isOpen={showPopover.open}
        event={showPopover.event}
        onDidDismiss={e => setShowPopover({open: false, event: null})}
      >
        <p>This is popover content</p>
      </IonPopover>
      <IonButton onClick={(e) => setShowPopover({open: true, event: e})}>Show Popover</IonButton>
    </>
  );
};

Answer 2

受到 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>

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

How to dynamically position a IonPopover to appear from a button?

reactjs

typescript

ionic-framework

popover

ionic-react