【前端】antd气泡确认框popconfirm基于promise失败状态阻拦关闭确认框

本文介绍了如何在React应用中利用antd的Popconfirm组件,结合Promise,实现当操作失败时阻止确认框自动关闭的功能。通过控制变量和处理Promise的拒绝状态,确保在错误情况下不关闭气泡确认框。

在点击确认框确认按钮时,通过变量判断是否需要关闭确认框,如果需要抛出promise失败。

import React, {
   
    useEffect, useState } from 'react';
import {
   
    Button, message, Modal, Popconfirm } from 'antd';


// 属性类型
interface IProps {
   
   
  title: React.ReactNode;
  /** @title 展示组件标题 */
  showCompText: string;
  /*** @title 展示按钮类型*/
  showCompBtnType: string;
  /*** @title 展示组件按钮加载中*/
  showBtnLoading: boolean;
  /** @title 展示组件点击事件 */
  onclick?: (e: any) => Promise<any>;
  /** @title 二次确认确定事件 */
  onOk?: (e: any) 
在不同的前端架和 UI 库中,`Popconfirm` 气泡确认主动隐藏的方法有所不同。以下以 Ant Design 为例,它是一个流行的 React UI 库,其中有 `Popconfirm` 组件。 在 Ant Design 的 `Popconfirm` 中,可以通过控制 `visible` 属性来主动显示或隐藏气泡确认。`visible` 是一个受控属性,需要通过 `onVisibleChange` 回调函数来处理其状态变化。 以下是一个示例代码: ```jsx import React, { useState } from 'react'; import { Popconfirm, Button } from 'antd'; const App = () => { const [visible, setVisible] = useState(false); const showPopconfirm = () => { setVisible(true); }; const hidePopconfirm = () => { setVisible(false); }; return ( <div> <Button onClick={showPopconfirm}>显示气泡确认</Button> <Popconfirm title="确认要执行此操作吗?" visible={visible} onVisibleChange={setVisible} onConfirm={hidePopconfirm} onCancel={hidePopconfirm} > <Button>触发操作</Button> </Popconfirm> <Button onClick={hidePopconfirm}>主动隐藏气泡确认</Button> </div> ); }; export default App; ``` 在上述代码中,通过 `useState` 来管理 `Popconfirm` 的 `visible` 状态。点击“显示气泡确认按钮时,调用 `showPopconfirm` 函数将 `visible` 设置为 `true` 以显示气泡确认;点击“主动隐藏气泡确认按钮时,调用 `hidePopconfirm` 函数将 `visible` 设置为 `false` 以隐藏气泡确认。同时,在 `onConfirm` 和 `onCancel` 回调中也调用 `hidePopconfirm` 函数,确保在用户确认或取消操作后隐藏气泡确认。 如果使用的是其他 UI 库或架,实现方式可能会有所不同,但通常也是通过控制类似的 `visible` 或 `open` 属性来实现主动隐藏。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值