Ant Design表格删除选中行：仅传递选中行ID至handleDelete

你的问题出在Button的onClick绑定方式上：onClick = {handleDelete(row.id)}这种写法会在表格渲染每一行时就直接执行handleDelete(row.id)，而不是等到点击按钮时才触发，所以会一次性输出所有行的ID。

修复方法 #

把onClick改成回调函数的形式，确保只有点击时才调用handleDelete并传递当前行的ID：

修改后的columns代码：

const columns = [
    {
      title: 'Action',
      key: 'action',
      sorter: true,
      render: (text, row) => (
        <Space size="middle">
           <Button onClick={() => handleDelete(row.id)} type="text"> Delete </Button>
        </Space>
      ),
    },
]

另一种写法（使用bind）：

const columns = [
    {
      title: 'Action',
      key: 'action',
      sorter: true,
      render: (text, row) => (
        <Space size="middle">
           <Button onClick={handleDelete.bind(null, row.id)} type="text"> Delete </Button>
        </Space>
      ),
    },
]

原理说明 #

• 箭头函数() => handleDelete(row.id)会在点击时才执行内部的handleDelete，此时传递的是当前行的row.id。
• bind(null, row.id)会创建一个新函数，点击时调用这个新函数，会自动把row.id作为参数传给handleDelete。

这样修改后，点击某一行的Delete按钮，就只会把该行的ID传递给handleDelete函数了。

内容的提问来源于stack exchange，提问作者Yoqubxon Xamidoff