React中如何给Table行删除按钮传递studentId以删除指定行

1. 传递当前行studentId参数 #

Ant Design Table 的 columns 配置中，render 函数的第二个参数就是当前行的完整数据对象，直接修改操作列的 render 逻辑即可拿到目标 studentId：

{
  title:"",
  key:"button",
  render: (text, student) => (
    <Button onClick={() => this.handleDelete(student.studentId)}>删除</Button>
  )
}

注意：你现有代码的 columns 配置里的 Key 是大写，实际 AntD 要求的属性是小写的 key，同时按钮列的属性值拼写为buttom属于笔误，建议修正避免出现渲染警告。

2. 删除成功后同步更新列表 #

因为需要操作组件 state 触发表格刷新，建议在组件内封装删除处理方法，等删除接口请求成功后再过滤掉已删除的学生数据：

// 类组件内新增方法
handleDelete = async (studentId) => {
  try {
    // 调用你封装的删除接口
    await deleteStudent(studentId);
    // 过滤掉已删除的学生，用prevState避免state异步更新问题
    this.setState(prevState => ({
      students: prevState.students.filter(item => item.studentId !== studentId)
    }))
    // 可在此处添加删除成功提示，比如antd的message.success('删除成功')
  } catch (err) {
    console.error('删除失败：', err)
    // 可在此处添加删除失败提示
  }
}

如果你的 columns 是定义在组件外部的，需要把 handleDelete 作为参数传入，或者直接把 columns 移到组件内部定义，才能正常访问组件实例的方法。

内容的提问来源于stack exchange，提问作者Marquez Ludin Albarado Jaimes