使用 Material UI 列表在 React beautiful dnd 中发布

Question

我正在尝试构建一个可重新排列的 material UI 列表，反应美丽 dnd。 除了列表中的 ListItemSecondaryAction 之外，一切正常。 （即）当我拖动列表项时，ListItemText 和 ListItemIcon 是可拖动的。 ListItemSecondaryAction 仅保留在同一位置，并且仅在删除该特定项目时才重新排列。

您可以在沙盒中尝试相同的方法 link：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 />

---

截图

---