材料UI(MUI).如何通过道具将处理程序传递给DataGrid组件(用于在列类型=操作中使用它们)

Question

文档说：https://mui.com/components/data-grid/columns/

如果列类型为"actions"，则需要提供getActions函数，该函数返回每行可用的操作数组(反应元件(。您可以在返回的React元素向数据网格发出信号，在行菜单。

{
field: 'actions',
type: 'actions',
getActions: (params: GridRowParams) => [
<GridActionsCellItem icon={...} onClick={...} label="Delete" />,
<GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />,
]
}

如何通过props-onClick处理程序进行传递？

<DataGrid deleteHandler={...} printHandler={...} /> 

Answer 1

我对这个愚蠢的问题感到抱歉。当然，我们可以在列中传递处理程序prop:((，但我找到了更好的解决方案。我在action列中不使用calback处理程序，但我使用组件。

getActions: (params: any) => [
<GridActionsCellItem
icon={<OpenIcon />}
label='Open'
component={Link}
to={`/counterparties/${params.id}`}
/>

Answer 2

文档实际上解释了如何添加处理程序：

访问特殊属性，然后向下滚动一点，然后单击显示完整的源图标

基本上，我们需要在处理程序所在的函数组件中声明列，但使用useMemo()包装列数组以防止不必要的重新提交。

const columns = React.useMemo(
() => [
{
field: 'actions',
type: 'actions',
width: 80,
getActions: (params) => [
<GridActionsCellItem
icon={<DeleteIcon />}
label="Delete"
onClick={deleteUser(params.id)}
/>,
<GridActionsCellItem
icon={<SecurityIcon />}
label="Toggle Admin"
onClick={toggleAdmin(params.id)}
showInMenu
/>,
<GridActionsCellItem
icon={<FileCopyIcon />}
label="Duplicate User"
onClick={duplicateUser(params.id)}
showInMenu
/>,
],
},
], [deleteUser, toggleAdmin, duplicateUser]);