Javascript 物料ui v.1-单击时通过外部索引的菜单项

在我的组件中，我有一个

表

，其中包含从一些自定义对象数组生成的行。在最后一个

TableCell

中，我希望有一个图标按钮，单击该按钮可打开

菜单

，并执行一些

菜单项

操作（编辑和删除）。这是我的代码：

{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>
);
})}

{folders.map（folder=>{
返回(
{folder.name}
{onEditFolder（事件，文件夹）}}>
onDeleteFolder（事件、文件夹）}>
);
})}

onClick

事件始终传递数组中的最后一个文件夹元素，而不是映射到特定

TableRow

的元素。 我已经读到

MenuItem

onClick

事件不应该以这种方式使用，但我没有任何其他想法来解决我的具体问题。我愿意接受任何建议。如何将对象从外部映射函数传递到

ManuItem

的

onClick

事件

编辑：

您可以尝试使用currying来避免内联菜单项处理程序，使其更具可读性（并避免可能出现的语法相关错误，我相信您已经遇到了）。您可以这样定义处理程序：

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

<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>

然后在渲染中使用它们（在

文件夹.map

循环中），如下所示：

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

<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）

返回一个函数，根据其定义，该函数需要一个事件。同样适用于删除文件夹（文件夹）

注意：我添加了

this

关键字作为这两个函数的前缀，假设它们在使用它们的同一组件中定义。如果您将它们作为道具传递，请进行相应的修改

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

我通过在状态下创建一个

菜单

数组来纠正这个问题，数组的长度设置为列表的大小，所有值初始化为

false

（这是在

componentDidMount

生命周期方法中完成的）。菜单打开和关闭以及关闭处理程序已更新，以传递列表项的索引，并相应地将

菜单

数组中的值更新为

真

或

假

。每个

菜单

组件的

打开

属性设置为

菜单

数组中的相应条目，以便根据相应值显示/隐藏菜单

最后，两个

菜单

组件都有相同的

id

，我也纠正了这一点

---

.

不幸的是，

onEditFolder

函数中的folder参数在我尝试使用currying时未定义。知道为什么吗？如果它在函数中是未定义的，那么当你在映射循环中将它作为参数传递给该函数时，它就是未定义的。您是否尝试过在每个映射迭代开始时（在返回语句之前）记录

文件夹的值？我发现我这边有问题，所以我创建了一个。正如您所看到的，数组项被传递给函数，但它始终是数组中的最后一个。该错误与映射无关，而是由您使用相同的布尔值设置菜单的
open
属性引起的。有关详细信息，请参阅更新的答案（包括修改的沙盒）。