时间戳

首页 > 解决方案 > react在mui-datatable的一列中创建菜单时，只返回列表最后一个元素的数据

reactjs - react在mui-datatable的一列中创建菜单时，只返回列表最后一个元素的数据

问题描述

在 react 中使用 mui-datatable 库，使用 customBodyRender 创建一个自定义列以添加菜单，当您单击其中一个选项时，它将执行一个操作。

问题是当你点击action时，进入函数的数据总是表中最后一条记录的数据，不管选择第一行的菜单，数据总是最后的。

我需要的是，当我单击一行的菜单时，它会返回该行的数据。

示例代码：https ://codesandbox.io/s/wonderful-mclaren-ivvlq?file=/src/App.js

在此处输入图像描述

在此处输入图像描述

标签： reactjsdatatablematerial-uireact-data-table-component

解决方案

我也经历过这种情况。我解决它的方法是在选择菜单图标时在状态变量中设置行选择索引，而不是在 MenuItem 内。索引从 customBodyRenderLite 或 customBodyRender 传递。

  const [anchorIndex, setAnchorIndex] = useState(0);

  const handleClick = (event, index) => {
    setAnchorEl(event.currentTarget);
    setAnchorIndex(index);
  };

  const iconButtonElement = (index) => {
    return (
      <div>
        <IconButton
          aria-label="More"
          aria-owns={open ? "long-menu" : null}
          aria-haspopup="true"
          onClick={event => handleClick(event, index)}
        >
          <MoreVertIcon color={"action"}/>
        </IconButton>
        {rightIconMenu(index)}
      </div>
    )
  }

当某些东西应该对菜单项进行操作时，它将使用状态中的值。

  const rightIconMenu = () => {
    return (
      <Menu elevation={2} anchorEl={anchorEl} open={open} onClose={onMenuClose}>
        <MenuItem onClick={handleCellClick}>View</MenuItem>
      </Menu>
    )
  };

  function handleCellClick() {
    history.push('/vehicleForm', {data: currentDataSet[anchorIndex]});
  }

推荐阅读