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)
  }
}
相关推荐
腾讯TNTWeb前端团队3 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰3 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试