React beautiful dnd 与 Material UI 列表的问题

Question

我正在尝试使用漂亮的 dnd 构建可重新排列的材质 UI 列表。 除了列表中的 ListItemSecondaryAction 外，一切正常。 （即）当我拖动列表项时，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 />

---

截图

---