需求:删除功能使用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 }