目录Popconfirm 两种写法完整对比方式1onConfirm{this.save} 【不包箭头函数】方式2onConfirm{() this.save()} 【箭头函数包裹】核心对比表格关键避坑重点拓展思考题加深底层理解Popconfirm 两种写法完整对比目标需求点击Popconfirm组件的弹窗里的【是】外层Button展示loading核心底层常识先记住Popconfirm 原生自动loading 只控制弹窗内部的「是」按钮永远无法自动控制外层包裹的Button。外层Button loading 只能依靠 state 手动管控。方式1onConfirm{this.save} 【不包箭头函数】代码示例render() { return ( Popconfirm title是否确定保存? onConfirm{this.save} okText是 cancelText否 Button loading{this.state.saveLoading}保存/Button /Popconfirm ) } save async () { if (this.state.saveLoading) return; this.setState({ saveLoading: true }); try { await saveApi(); message.success(保存成功); } catch (err) { message.error(保存失败); } finally { this.setState({ saveLoading: false }); } };执行机制解读onConfirm{this.save}组件调用 this.save()接收函数返回的Promise✅ 弹窗内【是】按钮自动拥有loadingantd原生能力✅ 外层Button依靠我们代码里 saveLoading 手动控制loading✅ 现象弹窗的确认按钮转圈 外层保存按钮同时转圈✅ 优点同时两套loading代码简洁没有多余箭头包裹⚠️ 缺点视觉上两个地方同时转圈部分产品UI不希望出现这种效果。方式2onConfirm{() this.save()} 【箭头函数包裹】代码示例render() { return ( Popconfirm title是否确定保存? onConfirm{() this.save()} okText是 cancelText否 Button loading{this.state.saveLoading}保存/Button /Popconfirm ) } // 和上面完全一致 save async () { if (this.state.saveLoading) return; this.setState({ saveLoading: true }); try { await saveApi(); message.success(保存成功); } catch (err) { message.error(保存失败); } finally { this.setState({ saveLoading: false }); } };执行机制解读// 等价理解onConfirm () {this.save();// 没有return返回值undefined}Popconfirm 执行箭头函数拿到返回值 undefined❌ 弹窗内【是】按钮不会自动出现loading✅ 外层Button依旧依靠 saveLoading 正常展示loading✅ 现象只有外层Button转圈弹窗内部确认按钮无loading 这是你当前业务想要的效果如果想让箭头函数写法同时开启弹窗loading拓展必须手动return Promise极少场景使用onConfirm{() { return this.save(); }}核心对比表格// ✅方案A大括号不return Promise弹窗按钮不loading推荐你的业务 onConfirm{(){ this.toSubmit() }} // ❌方案B无大括号隐式return Promise弹窗内部按钮转圈双重loading onConfirm{() this.toSubmit() } // ❌方案C手动return同样弹窗按钮转圈 onConfirm{() { return this.toSubmit() }}关键避坑重点无论哪种写法外层Button loading都不能自动生效必须手动维护state finally很多人误以为不传箭头函数就能自动控制外层按钮这是重大误区。不要忘记防重复点击判断if (this.state.saveLoading) return;finally必不可少防止接口异常导致按钮永久loading最终业务推荐你的需求只想要外层按钮loading直接使用箭头函数包裹方案踩坑点async 直接写 onConfirm 上// 也会弹窗按钮loading因为async函数一定返回Promise onConfirm{async (){ await this.toSubmit() }}哪怕你写了大括号只要是 async (){}函数本身返回 PromisePopconfirm 拿到 Promise弹窗按钮开启 loading。如果你不想弹窗 loading不要把 async 写在 onConfirm 外层async 放到内部 toSubmit 函数里面。拓展思考题加深底层理解Popconfirm onConfirm {} 大括号有无loading 表现不一样完整解析//写法1带大括号 onConfirm{() { this.toSubmit(); }} //写法2不带大括号 onConfirm{() this.toSubmit()}现象写法 1{}Popconfirm 内部确认按钮不会转圈只有外部 Button 自己 loading ✅我们想要的写法 2 无{}Popconfirm 弹窗里面的确认按钮会出现 loading 转圈双重 loading不想要箭头函数规则() { 代码 }大括号代表函数体代码块不会自动 return。如果你不手动写 return函数返回undefined() expr没有大括号是隐式返回表达式结果会自动把表达式的返回值 return 出去。问如果我写成 onConfirm{()this.save()}但是save没有async/await会影响外层loading吗答不会外层loading完全由 setState 控制和是否返回Promise无关。是否返回Promise 只影响弹窗内部确认按钮loading和外层Button毫无关系。async 函数永远返回 Promise
目录Popconfirm 两种写法完整对比方式1onConfirm{this.save} 【不包箭头函数】方式2onConfirm{() this.save()} 【箭头函数包裹】核心对比表格关键避坑重点拓展思考题加深底层理解Popconfirm 两种写法完整对比目标需求点击Popconfirm组件的弹窗里的【是】外层Button展示loading核心底层常识先记住Popconfirm 原生自动loading 只控制弹窗内部的「是」按钮永远无法自动控制外层包裹的Button。外层Button loading 只能依靠 state 手动管控。方式1onConfirm{this.save} 【不包箭头函数】代码示例render() { return ( Popconfirm title是否确定保存? onConfirm{this.save} okText是 cancelText否 Button loading{this.state.saveLoading}保存/Button /Popconfirm ) } save async () { if (this.state.saveLoading) return; this.setState({ saveLoading: true }); try { await saveApi(); message.success(保存成功); } catch (err) { message.error(保存失败); } finally { this.setState({ saveLoading: false }); } };执行机制解读onConfirm{this.save}组件调用 this.save()接收函数返回的Promise✅ 弹窗内【是】按钮自动拥有loadingantd原生能力✅ 外层Button依靠我们代码里 saveLoading 手动控制loading✅ 现象弹窗的确认按钮转圈 外层保存按钮同时转圈✅ 优点同时两套loading代码简洁没有多余箭头包裹⚠️ 缺点视觉上两个地方同时转圈部分产品UI不希望出现这种效果。方式2onConfirm{() this.save()} 【箭头函数包裹】代码示例render() { return ( Popconfirm title是否确定保存? onConfirm{() this.save()} okText是 cancelText否 Button loading{this.state.saveLoading}保存/Button /Popconfirm ) } // 和上面完全一致 save async () { if (this.state.saveLoading) return; this.setState({ saveLoading: true }); try { await saveApi(); message.success(保存成功); } catch (err) { message.error(保存失败); } finally { this.setState({ saveLoading: false }); } };执行机制解读// 等价理解onConfirm () {this.save();// 没有return返回值undefined}Popconfirm 执行箭头函数拿到返回值 undefined❌ 弹窗内【是】按钮不会自动出现loading✅ 外层Button依旧依靠 saveLoading 正常展示loading✅ 现象只有外层Button转圈弹窗内部确认按钮无loading 这是你当前业务想要的效果如果想让箭头函数写法同时开启弹窗loading拓展必须手动return Promise极少场景使用onConfirm{() { return this.save(); }}核心对比表格// ✅方案A大括号不return Promise弹窗按钮不loading推荐你的业务 onConfirm{(){ this.toSubmit() }} // ❌方案B无大括号隐式return Promise弹窗内部按钮转圈双重loading onConfirm{() this.toSubmit() } // ❌方案C手动return同样弹窗按钮转圈 onConfirm{() { return this.toSubmit() }}关键避坑重点无论哪种写法外层Button loading都不能自动生效必须手动维护state finally很多人误以为不传箭头函数就能自动控制外层按钮这是重大误区。不要忘记防重复点击判断if (this.state.saveLoading) return;finally必不可少防止接口异常导致按钮永久loading最终业务推荐你的需求只想要外层按钮loading直接使用箭头函数包裹方案踩坑点async 直接写 onConfirm 上// 也会弹窗按钮loading因为async函数一定返回Promise onConfirm{async (){ await this.toSubmit() }}哪怕你写了大括号只要是 async (){}函数本身返回 PromisePopconfirm 拿到 Promise弹窗按钮开启 loading。如果你不想弹窗 loading不要把 async 写在 onConfirm 外层async 放到内部 toSubmit 函数里面。拓展思考题加深底层理解Popconfirm onConfirm {} 大括号有无loading 表现不一样完整解析//写法1带大括号 onConfirm{() { this.toSubmit(); }} //写法2不带大括号 onConfirm{() this.toSubmit()}现象写法 1{}Popconfirm 内部确认按钮不会转圈只有外部 Button 自己 loading ✅我们想要的写法 2 无{}Popconfirm 弹窗里面的确认按钮会出现 loading 转圈双重 loading不想要箭头函数规则() { 代码 }大括号代表函数体代码块不会自动 return。如果你不手动写 return函数返回undefined() expr没有大括号是隐式返回表达式结果会自动把表达式的返回值 return 出去。问如果我写成 onConfirm{()this.save()}但是save没有async/await会影响外层loading吗答不会外层loading完全由 setState 控制和是否返回Promise无关。是否返回Promise 只影响弹窗内部确认按钮loading和外层Button毫无关系。async 函数永远返回 Promise
