Как закрыть IonPopover в ionic / react?

Question

Я использую Ioni c версии 6.10.1 для создания приложения. Точнее, я использую ioni c с синтаксисом реакции.

В моем приложении я хотел использовать компонент popover. Он работает отлично, отображается всплывающее окно, и я могу что-то с ним сделать, но я могу закрыть его только при нажатии снаружи, а не с помощью кнопки. По сути, я встроил в свое всплывающее окно две кнопки. Кнопки отмены и ОК. Я хочу закрыть всплывающее окно, когда я нажимаю ОК или Отмена, но я не мог этого сделать.

В примере в документации уже есть кнопка закрытия, и она работает, когда я нажимаю на нее. Однако исходный код написан на javascript и чем-то похож на чужой язык. Я буквально ничего не понял.

Я заметил, что есть и другие примеры с ionic / angular, но я понятия не имею о angular. Фактически, я начал изучать реакцию на этой неделе, так что я новичок.

По сути, мне нужен минимальный пример из ionic / react , который показывает, как это можно сделать. Я ценю любую помощь. Заранее спасибо

Answer 1

Я не использовал ioni c с react, но это может вам помочь.

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

Answer 2

Мне удалось решить проблему. Это было не из-за реакции или конструкции ioni c. Это была глупая опечатка.

Я использовал компонент всплывающего окна внутри такого скользящего компонента

<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 решит мою проблему