在我的组件中,我有一个Table
,其中包含从一些自定义对象数组生成的行。在最后的TableCell
我想有一个图标按钮,点击打开Menu
与一些MenuItem
的行动(编辑和删除)。这是我的代码:
{folders.map(folder => {
return (
<TableRow key={folder.id} >
<TableCell>{folder.name}</TableCell>
<TableCell>
<IconButton
onClick={this.handleFolderActionClick}>
<MoreHoriz />
</IconButton>
<Menu onClose={this.handleFolderActionClose} >
<MenuItem onClick={event => {onEditFolder(event, folder)}}>
<ListItemIcon>
<Edit />
</ListItemIcon>
<ListItemText inset primary="Edit" />
</MenuItem>
<MenuItem onClick={{event => onDeleteFolder(event, folder)}}>
<ListItemIcon>
<Delete />
</ListItemIcon>
<ListItemText inset primary="Delete" />
</MenuItem>
</Menu>
</TableCell>
</TableRow>
);
})}
onClick
事件始终传递数组中的最后一个文件夹元素,而不是映射到该特定TableRow
的那个文件夹元素。我读到过MenuItem
onClick
事件不应该以这种方式使用,但我不知道如何解决我的特定问题。我很乐意接受任何建议。如何将对象从外部映射函数传递到ManuItem
的onClick
事件
发布于 2018-05-29 12:52:52
您可以尝试使用currying来避免内联您的菜单项处理程序,并使它们更具可读性(并避免可能的语法相关的bug,我相信您已经有了)。您可以这样定义处理程序:
onEditFolder = folder => event => {
// edit click handler
}
onDeleteFolder = folder => event => {
// delete click handler
}
然后在渲染中(在folders.map
循环中)使用它们,如下所示:
<Menu onClose={this.handleFolderActionClose}>
<MenuItem onClick={this.onEditFolder(folder)}>
<ListItemIcon>
<Edit />
</ListItemIcon>
<ListItemText inset primary="Edit" />
</MenuItem>
<MenuItem onClick={this.onDeleteFolder(folder)}>
<ListItemIcon>
<Delete />
</ListItemIcon>
<ListItemText inset primary="Delete" />
</MenuItem>
</Menu>
之所以可以这样做,是因为根据定义,onEditFolder(folder)
会返回一个期望事件的函数。onDeleteFolder(folder)
也是如此。
注意:我添加了this
关键字作为这两个函数的前缀,假设它们是在使用它们的相同组件中定义的。如果将它们作为道具传递,请进行相应的修改。
FOLLOW-UP:该错误与映射无关,而是由于两个菜单依赖于相同的布尔值来切换打开或关闭,从而导致无论单击哪个项目都会显示最后一个菜单。
我通过在状态中创建一个menus
数组纠正了这个问题,该数组的长度设置为列表大小的长度,所有值都初始化为false
(这是在componentDidMount
生命周期方法中完成的)。菜单打开&关闭和关闭处理程序已更新,以传递列表项的索引,并相应地将menus
数组中的值更新为true
或false
。将每个Menu
组件的open
属性设置为menus
数组中的相应条目,以便根据相应的值显示/隐藏菜单。
最后,两个Menu
组件具有相同的id
,我也更正了这一点。
https://stackoverflow.com/questions/50574062
复制相似问题