Ant Design table 列渲染中如何获取单个item的id

Question

这里cartItems是我作为数据源传递的数组！

<Table
        style={{ marginTop: '2rem' }}
        columns={columns}
        dataSource={cartItems}
     />

如何在 render() 方法中获取 cartItems 数组中的单个项目？我只想提取 id 并想将它传递到 deleteFromCart(id) 中。

  const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Quantity', dataIndex: 'quantity', key: 'quantity' },
{ title: '$ Unit Price', dataIndex: 'price', key: 'price' },
{ title: '$ Total Price', dataIndex: 'totalPrice', key: 'totalPrice' },
{
  title: 'cartItem',
  dataIndex: 'cartItem',
  key: 'cartItem',
  render: (cartItem) => (
    <a
      style={{ color: 'red' }}
      onClick={(cartItem) => {
        deleteFromCart(cartItem.id)
        console.log('delete')
      }}
    >
      Remove
    </a>
  ),
},

]

我无法提取 ID..请帮忙！

Answer 1

onClick 事件给你 event 对象而不是 table 的 record。在您的情况下，由于变量名称相同，render 中的 cartItem 被 onClick handler 中的 cartItem 函数

隐藏

{
  title: 'cartItem',
  dataIndex: 'cartItem',
  key: 'cartItem',
  render: (cartItem) => (
    <a
      style={{ color: 'red' }}
      onClick={(e) => { // remove cartItem from here
        deleteFromCart(cartItem.id)
        console.log('delete')
      }}
    >
      Remove
    </a>
  ),
}

Answer 2

第二个参数（记录）是数组中的特定记录！

render: (item,record) => (    //second argument is the item
        <a
          style={{ color: 'red' }}
          onClick={(e) => {
            deleteFromCart(record.id)
          }}
        >
          Remove
        </a>
      ),
    },

Ant Design table 列渲染中如何获取单个item的id

How can I get single item's id in Ant Design table column rendering

javascript

arrays

rendering

reactjs

ant-design-pro