reactjs - Material 表内部 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 上设置选定的行，然后将该值用于其他操作，但我想知道这是否是 native 的，或者我应该说默认情况下可能，而不是我采用的方法.我尝试停止事件传播但徒劳无功。

Answer 1

感谢你提出这个问题，看到我并不孤单......

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

1. On the button being used to open the menu, I use the onClick event to set the selected menu row which I want to use, and save itto the component 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. In the MenuItem onClick event I check the state to retrieve that row and do the work needed...

   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