React MaterialUI <ListItemSecondaryAction> 在 react-beautiful-dnd Draggable 中拖动时卡住？

Question

我正在使用 react-beautiful-dnd to make some draggable list items using Material UI ListItems.

我的 ListItems 有一个 ListItemText 和一个 ListItemSecondaryAction 是用于打开上下文菜单的目标（包含一个图标）。

const DraggableListItem = ({ leaf, index, path, handleClick }) => {

    return (
        <Draggable draggableId={String(leaf.id)} index={index}>
            {(provided) => (
                <ListItem 
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    innerRef={provided.innerRef}
                    button component={NavLink}
                    to={path + '/' + leaf.id}
                >
                    <ListItemText primary={leaf.content} />
                    <ListItemSecondaryAction>
                        <IconButton edge="end" aria-label="more options" value={JSON.stringify(leaf)} onClick={handleClick}>
                            <MoreHorizIcon />
                        </IconButton>
                    </ListItemSecondaryAction>
                </ListItem>
            )}
        </Draggable>
    )
}

我面临的问题是，当拖动 Draggable 时，ListItemSecondaryAction 中的上下文菜单图标会向上移动一点然后冻结，尽管 ListItemText像预期的那样拖来拖去。

您可以在下面看到该项目被拖到列表的顶部，其他 ListItemText 正在围绕 placeholder/where 重新排列，被拖动的项目将被删除。然而，被拖动的项目的上下文菜单图标被冻结在它原来所在的位置上方一点，其他项目的上下文菜单图标没有移动到新的位置。

只需将 ListItemSecondaryAction 替换为 div 即可解决问题，但我需要 ListItemSecondaryAction.

提供的目标

以下在拖动项目方面按预期工作：IconButton 被拖动到 Draggable 中。

<div>
    <IconButton>
        <MoreHorizIcon />
    </IconButton>
</div>

我尝试只在不拖动时渲染 ListItemSecondaryAction（而不是在拖动时渲染 div），但是被拖动的项目的上下文菜单显示仍然存在延迟停留在一个地方一小段时间。我也可以在拖动时完全不渲染上下文菜单的目标 + 图标，但同样难看的图标卡在奇怪的地方一秒钟的问题发生了。

如何确保 IconButton 在 ListItemSecondaryAction 内时与 Draggable 一起拖动？

Answer 1

我使用解决方案的一个变体修复了图标问题，而不是渲染一个单独的 ListItemIcon 并仍然渲染 ListItemSecondaryAction，这改变了每个项目的布局，我发现在拖动时根本不渲染 ListItemSecondaryAction 并且只渲染 Icon 而不使用任何 ListItemIcon 或 IconButton 包装器会更好。不过，当渲染为 ListItem 的子项时，单独的 Icon 会更暗。自行设置图标样式以匹配辅助操作中图标的颜色后，看起来不错。

dragInProgress 是从父列表传递给所有列表项的一种状态，以便它们在拖动时仅呈现图标。 snapshot 来自 Draggable 中函数传递的快照，如链接问题中所示。还检查 snapshot.isDragging 以避免在状态 dragInProgress 更新并导致项目重新呈现时拖动项目的图标瞬间跳转。

<ListItem 
    {...provided.draggableProps}
    {...provided.dragHandleProps}
    ref={provided.innerRef} 
>
    <ListItemText primary={item.content} />
    {dragInProgress || snapshot.isDragging ?
        <MoreHorizIcon style={{color:'rgba(0, 0, 0, 0.54)'}} />
        :
        <ListItemSecondaryAction>
            <IconButton>
                <MoreHorizIcon />
            </IconButton>
        </ListItemSecondaryAction>
    }
</ListItem>

注意：不幸的是，不拖动时呈现的 ListItemSecondaryAction 不能很好地与触摸一起播放（在 chrome 上的 android 上测试）并且必须拖动两次才能开始移动项目。我可以将这个更具体的问题放在一个单独的问题中。

React MaterialUI <ListItemSecondaryAction> 在 react-beautiful-dnd Draggable 中拖动时卡住？

React MaterialUI <ListItemSecondaryAction> gets stuck when dragging inside react-beautiful-dnd Draggable?

javascript

reactjs

react-material

react-beautiful-dnd