Material UI Tabs拖拽排序异常：选中与拖拽功能无法共存求助

问题根源 #

当SortableContext包裹TabList时，dnd-kit的事件监听（如pointerdown）会覆盖MUI Tab的点击事件，导致Tab选中功能失效；若将SortableContext移到TabList外，dnd-kit无法正确识别可拖拽元素，拖拽功能失效。核心矛盾是拖拽事件与Tab点击事件的冲突，以及选中状态依赖索引导致排序后状态混乱。

解决方案 #

1. 隔离拖拽事件与Tab点击事件

将拖拽相关的attributes和listeners仅绑定到拖拽按钮上，避免干扰Tab的点击逻辑。

2. 优化选中状态存储

用Tab对应的item ID而非索引存储选中状态，避免排序后索引变化导致选中状态错位。

修改后的完整代码 #

App.js

import { Box } from "@mui/material";
import { useState } from "react";
import { DndContext, closestCenter } from "@dnd-kit/core";
import { arrayMove, SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
import SortableTab from "./SortableTab";
import { TabContext, TabList } from "@mui/lab";

const App = () => {
    const [items, setItems] = useState(["Item One", "Item Two", "Item Three", "Item Four", "Item Five"]);
    // 用item的ID作为选中标识，而非索引
    const [activeTab, setActiveTab] = useState(items[0]);

    const handleDragEnd = (event) => {
        const { active, over } = event;

        if (active.id !== over.id) {
            setItems((prevItems) => {
                const oldIndex = prevItems.indexOf(active.id);
                const newIndex = prevItems.indexOf(over.id);
                return arrayMove(prevItems, oldIndex, newIndex);
            });
        }
    };

    const handleChange = (event, newValue) => {
        // newValue直接是item的ID
        setActiveTab(newValue);
    };

    return (
        <div>
            <Box sx={{ width: "100%" }}>
                <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                    <TabContext value={activeTab}>
                        <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
                            <SortableContext items={items} strategy={rectSortingStrategy}>
                                <TabList onChange={handleChange} aria-label="basic tabs example">
                                    {items.map((item, index) => (
                                        // 将Tab的value设为item的ID
                                        <SortableTab value={item} key={item} id={item} index={index} label={item} />
                                    ))}
                                </TabList>
                            </SortableContext>
                        </DndContext>
                    </TabContext>
                </Box>
            </Box>
        </div>
    );
};

export default App;

SortableTab.js

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Tab, IconButton } from "@mui/material";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";

const SortableTab = (props) => {
    const { setNodeRef, transform, transition, setActivatorNodeRef, attributes, listeners } = useSortable({
        id: props.id,
    });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        display: "flex",
        alignItems: "center",
    };

    return (
        // 外层div仅绑定ref和样式，不绑定拖拽事件
        <div ref={setNodeRef} style={style}>
            <Tab {...props} />
            {/* 仅在拖拽按钮上绑定拖拽相关事件 */}
            <IconButton ref={setActivatorNodeRef} {...attributes} {...listeners} size="small">
                <DragIndicatorIcon fontSize="small" />
            </IconButton>
        </div>
    );
};

export default SortableTab;

关键修改说明 #

• 事件隔离：将拖拽事件仅绑定到拖拽按钮，确保Tab的点击事件能正常触发handleChange，恢复选中功能。
• 状态稳定性：用item ID存储选中状态，拖拽排序后选中状态不会因索引变化而错位。
• 布局优化：给外层div添加flex布局，让Tab与拖拽按钮垂直居中，提升视觉体验。

内容的提问来源于stack exchange，提问作者Nate