带有 React 的 Ionic popover - 如何使其粘在按钮上

Question

按照 Ionic 文档，我试图让弹出框粘在按钮上 (like on their own example)。 不幸的是，我不知道如何实现这一目标...... 谢谢

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>
    </>
  );
};

Answer 1

您还需要在 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>