Material-ui v.1 - MenuItem, передающий внешний индекс onClick

Question

В моем компоненте у меня есть 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 событие не должно использоваться таким образом, но у меня нет никакой другой идеи, как решить мою конкретную проблему.Я открыт для любых предложений.Как передать объект из функции внешней карты в onClick событие ManuItem?

Редактировать: Пример песочницы

Answer 1

Вы можете попробовать использовать curry , чтобы избежать встраивания обработчиков пунктов меню и сделать их более читабельными (и избежать возможных ошибок, связанных с синтаксисом, которые, как я полагаю, у вас есть).Вы можете определить обработчики следующим образом:

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, соответственно.Атрибут open каждого компонента Menu был установлен на соответствующую запись в массиве menus, чтобы показать / скрыть меню на основе соответствующего значения.

Наконец, оба Menuкомпоненты были одинаковыми id, я тоже это исправил.

См. рабочую песочницу .