zoukankan      html  css  js  c++  java
  • antd Modal.confirm点击确定请求完成后在关闭弹窗

    需求:删除功能使用confirm弹窗时希望点击确认后,请求删除接口,请求成功后在关闭confirm弹窗(避免请求还未完成用户有其他操作)

    问题:antd的Modal.confirm窗口官方给出的官方实例通过destroy()销毁弹窗,一般点击后直接关闭,而不是loading完成后关闭,所以我们需要找一个恰当的时机触发destroy()

    解决:

    注:该项目是react项目,用到了umi和Model,mock,  代码中removeLoading对应的是删除请求的loading

    //删除的点击事件
    onRemove = (values) => {
        const { dispatch, removeLoading } = this.props;
        let confimModal = Modal.confirm({
          title: '删除',
          content: '是否确认删除?',
          onOk:(values) => {
            return new Promise((res, rej) => {
          //点击确认进行删除请求,并且将confirmModal保存在state中,
              dispatch({ 
                type: 'api/remove', 
                payload: values
              });
              this.setState({ 
                confimModal,
                confirmState:true, //进入页面时confirmState默认为false,只有在点击确认后,数据请求成功之前标记为true
              })
            }).catch((e) => console.warn(e));
          },
          onCancel() { },
        });
    }
    根据react的生命周期,我们可以利用shouldComponentUpdate(),来进行监听,控制删除弹窗的销毁
    shouldComponentUpdate(nextProps, nextState){
        //关闭删除弹窗
        if(nextState.confirmState&&nextState.confimModal){ //当confirmState为ture并且confirmModal存在时证明用户点击了删除确认按钮
        //当接口在请求过程中,removeLoading会变为ture,请求成功后removeLoading为false,所以当为false时可以将删除弹窗销毁,并将关于弹窗的两个参数设置为初始状态
        if(nextProps.removeLoading!==undefined&&!nextProps.removeLoading){
           nextState.confimModal.destroy(); 
          this.setState({
            confirmState:false, 
            confimModal:null 
          }) 
        }
      } 
      return true
     }
  • 相关阅读:
    简单播放器(增加sdl事件控制)
    注册表读写
    vb6 的关机代码
    设置系统时间
    获取屏幕工作区、定位任务栏、窗口置顶
    用WINSOCK API实现同步非阻塞方式的网络通讯
    使用API调用外部程序并监控程序状态
    vba截屏保存
    StrConv 内码转换
    阻止文本框获取键盘输入
  • 原文地址:https://www.cnblogs.com/yunyea/p/10842729.html
Copyright © 2011-2022 走看看