React Sortable Hoc中onSortMove事件修改元素样式无效问题

我之前在使用React Sortable Hoc时也碰到过一模一样的问题！折腾了好一会儿才搞清楚原因，给你分享几个可行的解决方案：

为什么直接修改event.target.style不生效？ #

主要有两个核心原因：

• 目标元素不对：event.target可能指向的是可排序元素内部的子节点（比如里面的文本、图标），而不是最外层的可排序容器，修改它的样式自然看不到效果。
• 内部样式覆盖：React Sortable Hoc在拖拽过程中会动态添加自带的CSS类（比如react-sortable-hoc-dragging），这些类的样式优先级可能比你直接设置的行内样式更高，甚至组件内部会重置相关样式。

解决方案1：用CSS类管理样式（推荐） #

这是最符合React理念也最省心的方式，利用组件自带的拖拽状态类来控制样式：

先在你的CSS文件里定义：

/* 默认拖拽手柄样式 */
.react-sortable-hoc-drag-handle {
  cursor: grab;
}

/* 拖拽过程中的样式 */
.react-sortable-hoc-dragging .react-sortable-hoc-drag-handle {
  cursor: grabbing;
}

组件在拖拽开始时会自动给元素添加react-sortable-hoc-dragging类，结束时移除，完全不需要手动操作DOM，样式就能自动切换。

解决方案2：手动操作DOM（适合特殊场景） #

如果你一定要在onSortMove里修改样式，得确保选中正确的元素：

方式A：找到正确的可排序父元素 #

onSortMove = (event, index, collection) => {
  // 通过closest找到最外层的可排序元素（替换成你自己的类名）
  const sortableItem = event.target.closest('.your-sortable-item');
  if (sortableItem) {
    sortableItem.style.cursor = 'grabbing';
  }
}

方式B：结合onSortStart/onSortEnd统一控制 #

比起在onSortMove里频繁修改，更建议在拖拽开始和结束时一次性设置/重置样式：

onSortStart = (event) => {
  // currentTarget指向绑定事件的元素，也就是可排序项本身
  event.currentTarget.style.cursor = 'grabbing';
}

onSortEnd = (event) => {
  event.currentTarget.style.cursor = 'grab';
}

然后把这两个事件绑定到你的SortableElement组件上即可。

小提醒 #

尽量避免在React里直接操作DOM样式，因为React的虚拟DOM渲染可能会覆盖你手动设置的行内样式。用CSS类或者组件状态来管理样式，能让你的代码更可控，也更符合React的设计思路。

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