小编Had*_*war的帖子

材质表内部 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>
                            )
                        },
                    },
Run Code Online (Sandbox Code Playgroud)

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

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

reactjs material-ui material-table

3
推荐指数
1
解决办法
1235
查看次数

标签 统计

material-table ×1

material-ui ×1

reactjs ×1