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

【问题标题】：How to create a custom Material UI DataGrid column menu item?如何创建自定义 Material UI DataGrid 列菜单项？
【发布时间】：2022-08-15 04:20:28
【问题描述】：

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

所以我的问题是：

如何正确传递引用以便调用/引用 hideMenu 和 currentColumn？
（额外信用）一旦我获得了正确的引用，我如何改变数据网格，例如删除/添加/重命名列？我是否必须通过 apiRef（例如 useGridApiRef() ）或者对 currentColumn 的引用是否足够？
未捕获的类型错误：无法读取未定义的属性（读取 \'停止传播\'）在 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>
  );
};
```

标签： reactjs material-ui datagrid menu

【解决方案1】：

您必须从 onClick 传递 hideMenu 原始事件。当 hideMenu 直接作为道具提供时，这会自动发生。

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

【讨论】：