Antd+React+Inertia+Laravel环境下，表格行内下拉菜单如何获取当前行数据？

嘿，我看你遇到的问题是Antd表格行内的下拉菜单点击时拿不到当前行数据对吧？这其实是因为你现在的菜单items是提前定义好的，没有和当前行的record关联起来，所以点击时自然拿不到对应的数据。下面给你说具体的解决方法：

核心问题分析 #

你当前的items数组是在组件顶层定义的，里面的onClick只是绑定了函数本身，并没有传递当前行的record参数。而表格每行的render函数其实已经能拿到当前行的record，我们只需要把这个record传递给菜单的点击事件就行。

具体修改步骤 #

1. 动态生成菜单items：不要在组件顶层固定定义items，而是在每行的Dropdown渲染时，根据当前record动态生成菜单选项，这样每个菜单项的onClick就能捕获到对应行的数据。
2. 修正重复的key值：你原来的items里有多个选项的key都是'2'，Antd菜单要求每个key必须唯一，这会导致菜单渲染异常，记得改成不同的key。

修改后的Actions列render代码如下：

{
  title: 'Actions',
  dataIndex: '',
  key: 'action',
  render: (record) => {
    // 针对当前行动态生成菜单选项
    const dynamicItems = [
      {
        label: 'Add Child ',
        key: '1',
        onClick: () => handleCreateChildTask(record),
        icon: <PlusOutlined />,
      },
      {
        label: 'Close Task ',
        key: '2',
        onClick: () => handleCloseTask(record),
        icon: <CloseOutlined />,
      },
      {
        label: 'Complete Task ',
        key: '3',
        onClick: () => handleCompleteTask(record),
        icon: <CheckOutlined/>,
      },
      {
        label: 'Edit Task ',
        key: '4',
        onClick: () => handleEditTask(record),
        icon: <EditOutlined />,
      }
    ];

    return (
      <Dropdown menu={{ items: dynamicItems }}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            Hover me
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
    );
  },
},

然后你的handleCreateChildTask函数就能正常拿到当前行的record了：

const handleCreateChildTask = (record) => {
  console.log(" creating child on ", record);
  // 这里可以直接使用record.id、record.title等当前行的数据
};

原理说明 #

在表格每行的render函数里，我们能获取到当前行的record对象。通过动态生成菜单items，给每个菜单项的onClick绑定一个箭头函数，把record作为参数传递给对应的处理函数，这样点击时就能精准拿到当前行的数据了。

备注：内容来源于stack exchange，提问作者Asif