javascript - 使用Material UI列表在React Beautiful dnd中发布

我正在尝试使用react beautiful dnd构建可重新排列的材质UI列表。
除了列表中的ListItemSecondaryAction之外，其他所有东西都工作正常。
 （即）当我拖动列表项时，ListItemText和ListItemIcon是可拖动的。 ListItemSecondaryAction仅保留在同一位置，并且仅当该特定项被删除时才重新排列。

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

更改ListItemSecondaryAction的位置不能解决问题。

最佳答案

解

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

屏幕截图