材质表内部 onClick 仅显示最后一行值

Question

所以我遇到的问题是我有一个自定义呈现的列，其中有一个菜单按钮，单击它会打开一个如下所示的菜单：

现在看下面的代码：

  columns={[
                    {
                        title: 'Actions',
                        field: 'tableData.id',
                        render: rowData => {
                            return (
                                <div>
                                    <IconButton aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                                        <MenuIcon />
                                    </IconButton>
                                    <Menu
                                        className={classes.menu}
                                        id="simple-menu"
                                        anchorEl={anchorEl}
                                        keepMounted
                                        open={Boolean(anchorEl)}
                                        onClose={handleClose}
                                    >
                                        <MenuItem className={classes.sendMail} onClick={()=> 
                                                                 {console.log(rowData)}}>
                                            <ListItemIcon className={classes.icon}>
                                                <SendIcon fontSize="default" />
                                            </ListItemIcon>
                                            Send Assessment Email
                                        </MenuItem>
                                    
                                    </Menu>
                                </div>
                            )
                        },
                    },

来自行（即 rowData）的值在 IconButton 组件的第一个 onClick 上很好，但无论我选择哪一行，MenuItem 的第二个 onClick 都只显示最后一个 rowData 值。任何帮助，将不胜感激。谢谢。

编辑：我已经部署了一个快速修复，方法是在 useState 内的 Menubutton 上设置所选行，然后将该值用于其他操作，但我想知道这是否是本机的，或者我应该说默认情况下可能，而不是我采取的方法。我尝试停止事件传播但徒劳。

Answer 1

感谢您提出这个问题，并发现我并不完全孤单......

我不确定这是否可以作为解决方案或解决方法，但它对我有用。

1. 在用于打开菜单的按钮上，我使用onClick event设置要使用的选定菜单行，并将其保存到组件中state。

    const [slcRow, setSlcRow] = React.useState(null);
    const handleClick = (event, row) => {
        setAnchorEl(event.currentTarget);
        setSlcRow(row);
    };

    <Button 
        aria-controls="simple-menu" 
        aria-haspopup="true" 
        onClick={(event ) => {handleClick(event, row) }}
        >
        Open Menu
    </Button>

2. 在MenuItem onClick event我检查state以检索该行并执行所需的工作...

   const handleEditOpen = (event) => {
       let row = slcRow;
       loadEditData(row.clientId);
       setEdit(true);
       setAnchorEl(null);
   };

   <Menu id="long-menu" anchorEl={anchorEl} keepMounted open={open} onClose={handleClose1}>
       <MenuItem onClick={(event) => { handleEditOpen(event) }}>Edit </MenuItem>
   </Menu