React18-列表数据实现用户删除、批量删除

用户删除、批量删除接口

删除、批量删除接口

接口地址

shell 复制代码
POST

/users/delete

请求参数

js 复制代码
{
  userIds: []
}

参数为数组,删除和批量删除共用

功能介绍

  1. 单个删除

删除按钮绑定事件,点击显示弹框确认。

js 复制代码
// 删除
const handleDel = (values: DataType) => {
  // 此处要注意,不可以直接赋值
  /**
   * 1. 如果要通过更改状态的方式传参,则需要这么做。
   * userIds.push(values.userId)
   * setUserIds(userIds)
   * 2. 直接把参数传过去,不更改状态
   */
  Modal.confirm({
    title: '确认',
    content: <span>确认删除该用户吗?</span>,
    onOk: async () => {
      delUserSubmit([values.userId])
    }
  })
}
  1. 批量删除

添加复选框配置,勾选后,保存userIds状态,点击批量删除按钮,触发弹框确认

js 复制代码
// 绑定复选框事件
const rowSelection = {
  type: 'checkbox',
  selectedRowKeys: userIds,
  onChange: async (selectedRowKeys: React.Key[]) => {
    setUserIds(selectedRowKeys as number[])
  }
}

// 批量删除确认
const handlePatchConfirm = () => {
  if (userIds.length == 0) {
    message.error('请选择要删除的用户')
    return
  }
  Modal.confirm({
    title: '确认',
    content: <span>确认删除该批用户吗?</span>,
    onOk: async () => {
      delUserSubmit()
    }
  })
}
  1. 调用公共删除接口
js 复制代码
// 批量删除
const delUserSubmit = async (ids?: number[]) => {
  try {
    await api.userDel({
      userIds: ids || (userIds as number[]) //可单个删除,也可批量删除
    })
    message.success('删除成功')
    setUserIds([])
    getUserList()
  } catch (error) {
    console.log(error)
  }
}
相关推荐
开开心心就好17 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享18 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js