在 Antd + React + Inertia + Laravel 中将属性从表格行传递到下拉菜单

Question

所以我的设置是标准 Laravel (v10) + Inertia + React + Antd (v5)

我有一张桌子 - 每行都有一个下拉菜单。

这是我的任务表组件中的相关部分

import { Table, Dropdown, Menu, Button, Space  } from 'antd';
import { CloseOutlined, DownOutlined, CheckOutlined, PlusOutlined, EditOutlined} from '@ant-design/icons';

const TaskTable = ({tasks}) => {
var tasklist = {tasks};

let treeData = createDataTree(tasklist.tasks); 
//Creates treedata from laravel controller returned data

const handleCreateChildTask = (record) => {
        // param is the argument you passed to the function --> key or parent_id
        // e is the event object that returned
        console.log(" creating child on " + record);
      };

/** Other handlers removed for brevity **/

const items = [{
      label: 'Add Child ',
      key: '1',
      onClick: handleCreateChildTask,
      icon: <PlusOutlined />,
    },
    {
      label: 'Close Task ',
      key: '2',
      onClick: handleCloseTask,
      icon: <CloseOutlined />,
    },
    {
      label: 'Complete Task ',
      key: '2',
      onClick: handleCompleteTask,
      icon: <CheckOutlined/>,
    },
    {
      label: 'Edit Task ',
      key: '2',
      onClick: handleEditTask ,
      icon: <EditOutlined />,
    }];

const columns1 = useMemo(
        () => [
          {
            title: 'Desc',
            dataIndex: 'title',
            key: 'title',
          },
          { title: 'Priority', dataIndex: 'priority', key: 'priority' },
          { title: 'Status', dataIndex: 'status', key: 'status' },
          {
            title: 'Add',
            dataIndex: '',
            key: 'add',
            render: () => <a>Add a child</a>,
            
          },
          {
            title: 'Actions',
            dataIndex: '',
            key: 'action',
            render: (record) => <Dropdown
            menu= {{
              items,
            }}
          >
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                Hover me
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>,
            
          },
          {
            title: 'Remove',
            dataIndex: '',
            key: 'remove',
            render: () => <a>Remove the node</a>,
          },
        ],
        []
    );

        

    return (
        <Table
          pagination={false}
          columns={columns1}
          dataSource={treeData}
          rowKey="id"
          
        />
    );      

    }

我无法在“添加子项”处理程序 -handleCreateChildTask 中获取记录的值。

我对 React 和 JS 还很陌生，任何指示都会有帮助。

Answer 1

您无需为每个项目分配

onClick

功能。使用

<Menu>

组件 onClick 函数。一旦您选择任何项目，它将返回该项目的密钥（为项目列表中的每个项目分配唯一的密钥）。现在根据键，您可以调用适当的函数。现在您还可以访问该特定单元格的记录。 您可以检查 Dropdown 和 Menu 组件 API 来检查可以传递给 Dropdown 的所有 props 或遵循 antd dropdown 示例。

这是完整的代码。

import { useMemo } from 'react';
import { Table, Dropdown, Space } from 'antd';
import { CloseOutlined, DownOutlined, CheckOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';

const tasks = [
    { id: 1, title: 'Task 1', priority: 'High', status: 'Open', parent_id: null },
    { id: 2, title: 'Task 2', priority: 'Low', status: 'Close', parent_id: null }
];

const items = [
    { label: 'Add Child ', key: '1', icon: <PlusOutlined /> },
    { label: 'Close Task ', key: '2', icon: <CloseOutlined /> },
    { label: 'Complete Task ', key: '3', icon: <CheckOutlined /> },
    { label: 'Edit Task ', key: '4', icon: <EditOutlined /> }
];

const TaskTable = () => {
    const handleCreateChildTask = (record) => {
        console.log('record', record);
    };

    const columns1 = useMemo(
        () => [
            { title: 'Desc', dataIndex: 'title', key: 'title' },
            { title: 'Priority', dataIndex: 'priority', key: 'priority' },
            { title: 'Status', dataIndex: 'status', key: 'status' },
            { title: 'Add', dataIndex: '', key: 'add', render: () => <a>Add a child</a> },
            {
                title: 'Actions',
                dataIndex: '',
                key: 'action',
                render: (record) => (
                    <Dropdown
                        menu={{
                            items,
                            onClick: ({ key }) => {
                                if (key === '1') handleCreateChildTask(record);
                                // else if (key === '2')handleCloseTask
                            }
                        }}
                    >
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                Hover me
                                <DownOutlined />
                            </Space>
                        </a>
                    </Dropdown>
                )
            },
            {
                title: 'Remove',
                dataIndex: '',
                key: 'remove',
                render: () => <a>Remove the node</a>
            }
        ],
        []
    );

    return <Table pagination={false} columns={columns1} dataSource={tasks} rowKey='id' />;
};

export default TaskTable;

Answer 2

      <Dropdown menu={{
              items,
              onClick: (event) => {
                const { key } = event;
                handleDropdownItemClick(key, record);
              }
            }}
          >
        <div style={{userSelect: 'none'}}><EditOutlined /></div>
      </Dropdown>

您的元素带有项目的键：

  const handleDropdownItemClick = (key, record) => {
    console.log(key, record);
  }