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

【问题标题】：How to use a material-ui Menu inside a mui-datatable on event handler如何在事件处理程序的 mui-datatable 中使用 material-ui 菜单
【发布时间】：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>
        );
      }
    }
  }
];

【问题讨论】：

标签： reactjs material-ui menuitem mui-datatable

【解决方案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');
}

【讨论】：