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

Question

我正在尝试使用 React beautiful dnd 构建一个可重新排列的 Material 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 />

---

屏幕截图

---