时间戳

首页 > 解决方案 > 我需要在 handlesubmit 函数中显示反应材料 ui 确认对话框或甜蜜警报确认对话框

reactjs - 我需要在 handlesubmit 函数中显示反应材料 ui 确认对话框或甜蜜警报确认对话框

问题描述

我试图在我的代码中调用一个有登录页面的甜蜜警报。成功登录后，我希望弹出甜蜜警报。我添加了以下代码，但它似乎没有弹出

// 提交登录按钮。

handleSubmit= (event)=> 
{
   if (token !== null)
   {
        console.log(" ----User Login Success ------");

         return (
              <div>
              <SweetAlert 
               success 
                title="Success !" 
                 onConfirm={() => this.hideAlert()}
                     >
                 Hello world!
                  </SweetAlert>
                  </div>
          );

   }

在我的句柄提交中，一旦我验证了用户，我想使用一个甜蜜的警报确认对话框显示一个成功弹出窗口以接受协议或拒绝和协议。但是我无法加载弹出窗口

标签： reactjs

解决方案

不要JSX从函数返回。相反，您可以拥有一个状态变量，例如，

state = {showAlert: false}

并在成功登录时更新状态，

handleSubmit= (event)=> 
{
   if (token !== null)
   {
      this.setState({showAlert : true})
   }
}

显示您的警报（仅将其保留在渲染功能中）

{
this.state.showAlert && <div>
    <SweetAlert success title="Success !" onConfirm={()=> this.hideAlert()}>
        Hello world!
    </SweetAlert>
</div>
}

推荐阅读