如何在事件处理程序的 mui-datatable 中使用 material-ui 菜单

Posted 2023-02-22

【中文标题】如何在事件处理程序的 mui-datatable 中使用 material-ui 菜单

【英文标题】：How to use a material-ui Menu inside a mui-datatable on event handler

【发布时间】：2020-06-19 05:23:40

【问题描述】：

我正在尝试使 openFilePreviewDialog(id) 操作返回其行的 id。

问题：它返回了错误的 id，而不是返回 id=7，而是返回了 8

[
  
    name: "id",
    label: " ",
    options: 
      filter: true,
      sort: false,
      customBodyRender: id => 
        const options = ["View", "Signature", "Download", "Share", "Delete"];

        return (
          <div>
            <IconButton
              className=classes.iconButton
              aria-label="more"
              aria-controls="long-menu"
              aria-haspopup="true"
              onClick=handleClick
            >
              <MoreVertRounded />
            </IconButton>
            <Menu
              id="long-menu"
              anchorEl=anchorEl
              keepMounted
              open=open
              onClose=handleClose
            >
              options.map(option => (
                <MenuItem
                  key=option
                  onClick=() => openFilePreviewDialog(id)
                >
                  option
                </MenuItem>
              ))
            </Menu>
          </div>
        );
      
    
  
];

【参考方案1】：

MUIDatatable 总是获取 id 字段中的最后一个值，与您点击哪个索引无关。也许这是 MUIDatatable 中的一个错误。但我为您找到了另一种解决方案。您需要按如下方式处理 onRowClick：

const options = 
    filterType: 'dropdown',
    responsive: 'scrollFullHeight',
    serverSide: true,
    count: total,
    page: page,
    searchText: tableState.options.searchText,
    onRowClick: handleRowClick

然后您使用以下代码存储 Id（服务是填充在 MUIDatatable 上的数据集合）。我使用 UseState 来存储 id：

const [serviceId, setServiceId] = useState(0);

const handleRowClick = (rowData, rowMeta) => 
    setServiceId(services[rowMeta.dataIndex].id);
;

然后在您的函数 openFilePreviewDialog 中，您可以使用该 ID：

function openFilePreviewDialog(id) 
    console.log(serviceId, 'serviceRequestId');