3

当单击该按钮时，我正在尝试定位一个弹出框以显示在该按钮下方。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>
...

弹出框由其上方的按钮切换。按下按钮时，弹出框出现在页面中间，而不是按钮上方。如何更改此选项以使弹出框显示在按钮上？（如图片）

谢谢

4

2 回答 2

12

受到 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>
于 2020-01-07T04:27:43.350 回答
1

从文档：

要呈现弹出框，请在弹出框实例上调用 present 方法。为了相对于点击的元素定位弹出框，需要将点击事件传递到本方法的选项中。如果事件未通过，则弹出框将位于视口的中心。

所以你需要将点击事件传递给弹出框的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>
    </>
  );
};
于 2019-12-02T14:07:03.797 回答