如何禁用Draggable内特定子组件的拖拽功能（MUI场景）

针对可拖拽MUI Row组件内嵌套Slider、需要禁用Slider拖拽的场景，提供以下实用方案：

方案1：直接禁用Slider（最简单） #

给Slider添加disabled属性，会直接禁用所有交互（包括拖拽、点击），同时组件自动应用禁用样式：

<Slider disabled value={30} onChange={handleChange} />

方案2：仅禁用拖拽，保留点击选值 #

如果需要保留Slider的点击选值功能，仅阻止拖拽操作，可通过阻止拖拽起始事件的冒泡和默认行为实现：

<Slider
  value={30}
  onChange={handleChange}
  onMouseDown={(e) => {
    e.stopPropagation();
    e.preventDefault();
  }}
  onTouchStart={(e) => {
    e.stopPropagation();
    e.preventDefault();
  }}
/>

这种方式会阻止用户拖动滑块，但点击轨道仍可调整数值，且不影响外层Row的拖拽功能。

方案3：自定义Thumb组件禁用拖拽 #

如果需要更精细的控制，可替换Slider的Thumb组件，移除它的拖拽事件监听：

import Slider from '@mui/material/Slider';
import Thumb from '@mui/material/Slider/Thumb';

// 自定义无拖拽功能的Thumb
const NonDraggableThumb = (props) => {
  const handleMouseDown = (e) => e.stopPropagation();
  const handleTouchStart = (e) => e.stopPropagation();

  return <Thumb {...props} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart} />;
};

// 使用自定义Thumb的Slider
<Slider
  value={30}
  onChange={handleChange}
  ThumbComponent={NonDraggableThumb}
/>

方案4：通过CSS禁用拖拽 #

若不想修改JS逻辑，也可以用CSS实现：

/* 禁用Slider的拖拽交互 */
.non-draggable-slider {
  pointer-events: none;
}
/* 若需保留Thumb的点击或其他交互，单独开启 */
.non-draggable-slider .MuiSlider-thumb {
  pointer-events: auto;
}

然后给Slider添加对应的className：

<Slider className="non-draggable-slider" value={30} onChange={handleChange} />

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