如何创建自定义的Material UI DataGrid列菜单项？

Question

对于 Material UI 的 DataGrid（v5.2.0），我正在尝试创建一个自定义列菜单项来操作该列。如果我设置 onClick={hideMenu}，那么当我点击它时菜单成功隐藏。然而，如果我设置 onClick={handleMenuItemClick}，并在该函数中调用 hideMenu()，那么我会收到一个未捕获的错误，抱怨 stopPropagation。这让我觉得我成功地访问了 hideMenu()，但引用是错误的。

所以我的问题是：

1. 如何正确传递引用，以便我可以调用/引用 hideMenu 和 currentColumn？
2. (额外加分) 一旦我得到了正确的引用，如何改变数据网格，例如删除/添加/重命名列？我必须传递 apiRef (例如 useGridApiRef()) 还是对 currentColumn 的引用就足够了？

未捕获的 TypeError: 无法读取未定义的属性（reading 'stopPropagation'） 在 index-esm.js：15:1 在 handleMenuItemClick（CustomColumnMenuComponent.jsx：17:1） 在 HTMLUnknownElement.callCallback（react-dom.development.js：3945:1） 在 Object.invokeGuardedCallbackDev（react-dom.development.js：3994:1） 在 invokeGuardedCallback（react-dom.development.js：4056:1） 在 invokeGuardedCallbackAndCatchFirstError（react-dom.development.js：4070:1） 在 executeDispatch（react-dom.development.js：8243:1） 在 processDispatchQueueItemsInOrder（react-dom.development.js：8275:1） 在 processDispatchQueue（react-dom.development.js：8288:1） 在 dispatchEventsForPlugins（react-dom.development.js：8299:1）

import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import {
  GridColumnMenuContainer,
} from '@mui/x-data-grid-pro';

export default function CustomColumnMenuComponent(props) {
  const { hideMenu, currentColumn, ...other } = props;

  const handleMenuItemClick = () => {
    // do something with currentColumn...
    hideMenu()
  };

  return (
    <GridColumnMenuContainer hideMenu={hideMenu} currentColumn={currentColumn} {...other}>
      <MenuItem onClick={handleMenuItemClick} column={currentColumn}>Mutate Column</MenuItem>
      <MenuItem onClick={hideMenu} column={currentColumn}>Close Menu</MenuItem>
    </GridColumnMenuContainer>
  );
};

- shunyun

Answer 1

当使用高阶处理程序包装hideMenu时，您需要将原始事件作为参数传递给它。MUI在onClick中提供原始事件。请注意保留HTML标记。

  const handleMenuItemClick = (event) => {
    // do something with currentColumn...
    hideMenu(event)
  };

第一个例子能够正常工作是因为当hideMenu作为onClick处理程序直接提供时，事件传递会自动发生。

你的第二个问题有点含糊，请明确你想要做什么。但通常情况下，你可以像这样在自定义组件中访问API方法：

const apiRef = useGridApiContext();

这里有使用API参考和可用方法的指南：

https://mui.com/x/react-data-grid/api-object/

- paul