如何在 ionic/react 中关闭 IonPopover？答案

【问题标题】：How to close an IonPopover in ionic/react?如何在 ionic/react 中关闭 IonPopover？
【发布时间】：2020-11-24 13:13:54
【问题描述】：

我正在使用 Ionic 6.10.1 版来构建应用程序。准确地说，我正在使用带有反应语法的离子。

在我的应用程序中，我想使用一个弹出框组件。它工作得很好，显示了弹出框，我可以用它做点什么，但我只能在我点击外部而不是从按钮时关闭它。基本上，我在弹出框中集成了两个按钮。取消和确定按钮。我想在单击“确定”或“取消”时关闭弹出框，但我做不到。

The example in the docs 已经有一个关闭按钮，当我单击它时它会起作用。然而，源代码是用 javascript 编写的，不知何故它看起来像外星语言。我真的什么都不懂。

我注意到还有其他离子/角度的例子，但我不知道角度。事实上，我这周开始学习 React，所以我还是个初学者。

基本上，我想要的是 ionic/react 中的一个最小示例，它显示了如何做到这一点。我很感激任何帮助。提前致谢

【问题讨论】：

标签： javascript reactjs ionic-framework frontend ionic4

【解决方案1】：

我没有在 react 中使用 ionic 但这可能会对您有所帮助。

dismissPopOver(bool){  // make seperate dismiss function
    setShowPopover(bool);
}
    return (
        <>
          <IonPopover
            isOpen={showPopover}
            cssClass='my-custom-class'
            onDidDismiss={e => setShowPopover(false)}
          >
            <p onClick={()=> dismissPopOver(false)}>Click your Content to dismiss popover</p>

          </IonPopover>
          <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
        </>
      );

【讨论】：

thnx 但它没有用。它似乎是离子/反应中的一个错误。正如我所看到的，它适用于 angular 和 plain js，但是没有关于如何使用 react 来做到这一点的资源。

【解决方案2】：

我设法解决了这个问题。它不是因为反应或离子而设计的。这是我的一个愚蠢的错字。

我在这样的滑动组件中使用了 popover 组件

<IonItemSliding>
    <IonItemOptions side="start">
      <IonItemOption onClick={(e) => setShowPopover(true)}>Favorite
      <IonPopover backdropDismiss 
    keyboardClose
    showBackdrop
    isOpen={showPopover}
    onDidDismiss={e => setShowPopover(false)}>
<p>Select Priority and Time To Live</p>
    <IonButton onClick={() => setShowPopover(false)}>dismiss</IonButton>
    </IonPopover>
     </IonItemOption>
    </IonItemOptions>

    <IonItem>
      <IonLabel>Item Options</IonLabel>
    </IonItem>

    <IonItemOptions side="end">
      <IonItemOption onClick={() => console.log('unread clicked')}>Unread</IonItemOption>
    </IonItemOptions>
  </IonItemSliding>

注意弹出框是如何在 ItemOption 中的，这是错误的。在 ItemOption 解决我的问题后移动弹出框

【讨论】：