Material-ui v.1-通过外部索引onClick传递MenuItem [英] Material-ui v.1 - MenuItem passing outer index onClick

问题描述

在我的组件中，我有一个 Table ，其中包含一些自定义对象数组生成的行.在最后一个 TableCell 中，我想要一个图标按钮，单击该按钮可打开 Menu 以及一些 MenuItem 操作(编辑和删除).这是我的代码:

In my component I have a Table with generated rows from some custom array of objects. In the last TableCell I want to have a icon button that on click opens Menu with some MenuItem actions (edit and delete). This is my code:

{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 事件?

The onClick event is always passing the last folder element in the array and not the one mapped to that particular TableRow. I've read that MenuItem onClick event should not be used in this manner but I don't have any other idea how to solve my specific problem. I'm opened for any suggestions. How to pass object from the outer map function to onClick event of ManuItem?

沙盒示例

推荐答案

您可以尝试使用 currying 来避免内联菜单项处理程序并使它们更易读(并避免可能的语法相关错误，我相信你有).您可以这样定义处理程序:

You could try using currying to avoid inlining your menu item handlers and make them more readable (and avoid possible syntax-related bugs, which I believe you have). You would define the handlers like this:

onEditFolder = folder => event => {
  // edit click handler
}
onDeleteFolder = folder => event => {
  // delete click handler
}

然后像下面这样在渲染器中(在 folders.map 循环内部)使用它们:

And then use them in your render (inside your folders.map loop) like this:

<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)相同.

You can do this because onEditFolder(folder) returns a function that expects an event, as per its definition. Same for onDeleteFolder(folder).

注意:我添加了 this 关键字作为这两个函数的前缀，这假定它们是在使用它们的同一组件内定义的.如果将它们作为道具传递，则进行相应的修改.

Note: I added the this keyword as a prefix for both functions, that would be assuming they're defined inside the same component where they are used. If you pass them as props, modify accordingly.

跟进:该错误与映射无关，而是由于两个菜单都依赖于相同的布尔值来切换打开或关闭，从而导致无论单击哪个项目，都显示最后一个菜单.

FOLLOW-UP: The error had nothing to do with the mapping, but was caused by both menus relying on the same boolean value to toggle open or close, causing the last menu to display regardless of which item was clicked.

我通过在状态下创建一个 menus 数组来纠正此问题，该数组的长度设置为列表大小的长度，并且所有值都初始化为 false (这是在 componentDidMount 生命周期方法).菜单打开和更新了close和close处理程序以传递列表项的索引，并相应地将 menus 数组中的值更新为 true 或 false .每个 Menu 组件的 open 属性都设置为 menus 数组中的相应条目，以便基于菜单显示/隐藏菜单.相应的值.

I corrected this by creating a menus array in state, with length set to that of the size of the list and all values initialized to false (this is done in the componentDidMount lifecycle method). Menu open & close and close handlers were updated to pass the index of the list item, and updating the value in the menus array to true or false, accordingly. The open attribute of each Menu component was set to the corresponding entry in the menus array, in order to show/hide the menu based on the corresponding value.

最后，两个 Menu 组件都具有相同的 id ，我也对此进行了纠正.

Finally, both Menu components had the same id, I corrected that as well.

查看有效的沙箱.

这篇关于Material-ui v.1-通过外部索引onClick传递MenuItem的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！