Material-ui v.1 -传递外部索引onClick的MenuItem
在我的组件中，我有一个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事件
回答 1
Stack Overflow用户
发布于 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
复制相似问题