对话框取消按钮需要停止浏览器事件

时间:2015-08-27 14:43:13

标签: javascript dialog reactjs

我试图在用户浏览页面/组件时显示对话框/确认。

我有以下对话框组件,当前使用侦听器触发:

emptyBasket: function () {

    basketChannel.publish({
        channel: "basket",
        topic: "emptyBasket",
        data: {

        }
    });

},    

OnClick哪个会发布:

onTabLinkClick: function(e) {

    var url = window.location.href;
    var currentRoute = url.substr(url.length - 6)

    if(this.state.BasketTotal > 0 && currentRoute != 'basket' ){

        basketChannel.publish({
            channel: "basket",
            topic: "openDialog",
            data: {
                dialogTitle: 'Warning',
                dialogContent: 'You have contacts in your basket, are you sure you want to leave?'
            }
        });

    }
}

对话框组件中的侦听器然后更改状态并显示对话框:

_listenerForDialog: function(data) {
    this.setState({
        title: data.dialogTitle,
        content: data.dialogContent,
        visible:true
    });
},

这有效,但我想添加一个确定和取消按钮,如果点击取消按钮,我想停止活动。

如何将我的组件附加到e.preventDefault()

我可以像本机浏览器confirm()一样使用吗?

 var confirmDialog = confirm("You have contacts in your basket, are you sure you want to leave?");
        if(confirmDialog == false ){
            e.preventDefault();
        } else{
            this.emptyBasket();
        }

我正在使用npm包https://www.npmjs.com/package/rc-dialog

已更新

当前组件中的

onClose:

onClose(){
    this.setState({
        visible:false
    });

    basketChannel.publish({
        channel: "basket",
        topic: "emptyBasket",
        data: {

        }
    });
},

提前致谢

0 个答案:

没有答案