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

Question

我试图让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>
        );
      }
    }
  }
];

Answer 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');
}