javascript - React beautiful dnd 与 Material UI 列表的问题

Question

我正在尝试用漂亮的 dnd 构建一个可重新排列的材料 UI 列表。除了列表中的 ListItemSecondaryAction 外，一切正常。(ie) 当我拖动一个列表项时，ListItemText 和 ListItemIcon 是可拖动的。ListItemSecondaryAction 仅保留在同一位置，并且仅在删除该特定项目时才重新排列。

您可以在沙盒链接中尝试相同的方法：https ://codesandbox.io/s/4qp6vjp319

更改 ListItemSecondaryAction 的位置并没有解决问题。

Answer 1

解决方案

移出修复此IconButton问题ListItemSecondaryAction

• 从改变

<ListItemText
  primary={item.primary}
  secondary={item.secondary}
/>
<ListItemSecondaryAction>
  <IconButton>
    <EditIcon />
  </IconButton>
</ListItemSecondaryAction>

• 至

<ListItemText
  primary={item.primary}
  secondary={item.secondary}
/>
<ListItemIcon>
  <IconButton>
    <EditIcon />
  </IconButton>
</ListItemIcon>
<ListItemSecondaryAction />

---

截屏

---