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

问题描述

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

现在看下面的代码：

  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上设置所选行，然后将该值用于其他操作，我已经部署了快速修复程序，但我想知道这是否是本机的，或者我应该说默认情况下可行，而不是我采用的方法。我试图阻止事件传播，但徒劳无功。

解决方法

感谢您提出这些问题并看到我并不孤单...

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

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,row) => {
       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,row) }}>Edit </MenuItem>
   </Menu