如何使用离子反应在应用程序加载时打开模态弹出窗口

问题描述

我正在使用 ionic-react 并希望在启动应用程序时启动一个模态弹出窗口。这个想法是在应用程序启动时创建一个登录弹出窗口。如果用户已经登录，我将关闭它，否则用户将登录。

我目前的问题是如何自动打开它？

我知道使用按钮打开的方式，代码如下

 <IonModal isOpen={loginModal} cssClass='my-custom-class'>
        <p>This is modal content</p>
        <IonButton onClick={() => setLoginModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setLoginModal(true)}>Show Modal</IonButton>

但我不需要按钮。

解决方法

它会根据您设置为 loginModal 的 isOpen 自动打开。当它设置为 true 时，模态将被打开。你应该为此使用一个变量。

const [showModal,setShowModal] = useState(true);

...

return(
  <IonModal isOpen={showModal} cssClass='my-custom-class'>
  ...
  </IonModal>
)

edit: fixed typo brackets