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

wkftcu5l  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(151)

所以我的设置是标准的Laravel(v10)+ Inertia + React + Antd(v5)
我有一个表格-每一行都有一个下拉菜单。

下面是我的TaskTable组件中的相关部分

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"
          
        />
    );      

    }

我无法在“AddChild”处理程序- handleCreateChildTask中获取记录的值。
我是React和JS的新手,任何指针都很有帮助。

klh5stk1

klh5stk11#

您不需要为每个项目分配onClick函数。使用<Menu>组件onClick函数。一旦你选择了任何一个项目,它将返回你该项目的关键(分配唯一的关键到项目列表中的每个项目)。现在基于键,你可以调用合适的函数。现在您还可以访问该特定单元格的记录。你可以检查下拉菜单组件API来检查所有你可以传递给下拉菜单的 prop ,或者跟随下拉菜单的例子。
下面是完整的代码。

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;

相关问题