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
 }

 

转载于:https://www.cnblogs.com/yunyea/p/10842729.html