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

Posted 2023-02-22

【中文标题】材料表内部 onClick 仅显示最后一行值

【英文标题】：Material Table inner onClick shows only last row value

【发布时间】：2021-01-05 09:03:37

【问题描述】：

所以我遇到的问题是我有一个自定义渲染列，里面有一个菜单按钮，点击它会打开一个这样的菜单：

现在看下面的代码：

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

【问题讨论】：

你能加入Minimal, Reproducible Example吗？这样，其他人就很容易测试问题并提供解决方案

你可以添加你的代码here

【参考方案1】：

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

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

在用于打开菜单的按钮上，我使用onClickevent设置我要使用的选定菜单行，并保存它 到组件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>

在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