时间戳

首页 > 解决方案 > 如何在 ReactJs 中单击单选按钮时显示弹出窗口

javascript - 如何在 ReactJs 中单击单选按钮时显示弹出窗口

问题描述

我正在开发一个 ReactJs 项目，我有一个 2 单选按钮。一个单选按钮的值为电子邮件 ID，另一个单选按钮的值为“无电子邮件警报”。此外，页面上还有一个保存按钮. 因此，当我单击“无电子邮件警报”单选按钮并单击保存按钮时，我必须得到一个弹出窗口，上面写着“您将停止收到电子邮件警报。您要继续吗？” .所以，要检查单击了哪个单选按钮并显示弹出窗口，我添加了 2 个状态值我的代码结构如下所示。

 this.state = {
          noAlertPopUpClicked:false,
          showNoAlertPopup:false
}

然后在我的onRadioClick()函数中，我添加了一个条件：

 onRadioClick = (e, keys) => {
        if(e.target.value === 'No text message alerts'){
            this.setState({noAlertPopUpClicked: !this.state.noAlertPopUpClicked});
        }
}

我有另一个函数confirmNoAlertClicked()将显示弹出窗口：

confirmNoAlertClicked() {
    alert(this.state.noAlertPopUpClicked);
    if(this.state.noAlertPopUpClicked) {
      this.setState({showNoAlertPopup : true});
    }
  }

然后在我的渲染函数中，

        <DialogBox
          displayDialog={this.state.showNoAlertPopup} >
           <ConfirmEmail /> 
        </DialogBox>

该<DialogBox />组件已经定义，它基于 prop 打开一个弹出窗口displayDialog。该<ConfirmEmail />组件是 DialogBox 的内容。现在，我面临的问题是，当我单击无警报单选按钮然后单击保存时，第一次出现对话框，但如果我再次单击保存按钮，则对话框不显示向上。我的状态是否没有正确更新。谁能指导我？

编辑1：我的保存按钮是：

             <SceButton
              id='Save'
              buttonType='sceDisabled'
              value='Save' 
              onClick={this.confirmNoAlertClicked} />

标签： javascriptreactjs

解决方案

推荐阅读