所以我的设置是标准的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的新手,任何指针都很有帮助。
1条答案
按热度按时间klh5stk11#
您不需要为每个项目分配
onClick
函数。使用<Menu>
组件onClick函数。一旦你选择了任何一个项目,它将返回你该项目的关键(分配唯一的关键到项目列表中的每个项目)。现在基于键,你可以调用合适的函数。现在您还可以访问该特定单元格的记录。你可以检查下拉菜单组件API来检查所有你可以传递给下拉菜单的 prop ,或者跟随下拉菜单的例子。下面是完整的代码。