如何从MUI中的菜单组件中获取特定的ListItem以作出反应
如何从MUI中的菜单组件中获取特定的ListItem以作出反应
提问于 2022-08-09 15:41:41
我有一个有几个ListItems的列表，这是从数组中得到的，让我们称之为myCollection。每个ListItem都有一个MenuIcon，它打开一个菜单，显示一个删除项目的选项。简化的代码如下所示：
<List>
<Menu
open={Boolean(anchorEl)}
anchorEl={anchorEl}
...>
<MenuItem onClick={() => handleDelete(⚡collectionItem)}>Delete</MenuItem>
</Menu>
{myCollection.map((collectionItem) => (
<ListItem secondaryAction={
<IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
<MoreVertIcon />
</IconButton>
}>
{collectionItem.name}
</ListItem>
)}
</List>我的问题是，我需要知道选择了myCollection中的哪一项才能将其传递给delete函数。但是，我没有从菜单中引用myCollection数组中的当前myCollection。将菜单移动到map函数中没有意义，因为会呈现多个菜单。我该如何解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-21 14:04:07
我通过给出IconButton的自定义HTML数据属性来解决这个问题。
<IconButton data-collection-id={collection.id} onClick={...}>
...
</IconButton>然后，在onClick函数中，我们可以使用event.currentTarget.getAttribute("data-collection-id")检索它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73294571
复制相关文章
相似问题
腾讯云开发者
