启用排序时 React-Virtualized 取消点击事件

Question

我正在创建一个表格，其中列可调整大小，就像使用 react-draggable 的 react-virtualized GitHub 页面上的演示一样：https://codesandbox.io/s/j30k46l7xw

不过，我也希望表格支持排序。

当我在表格上添加sort 属性时，每次调整列大小并且鼠标仍在标题列内时都会调用排序函数。

在这里查看控制台日志，我在上面的演示中添加了sort 属性：https://codesandbox.io/s/n32x4ry1ym

有什么方法可以阻止调用排序函数？ 我尝试在 react-draggable 中将event.stopPropagation() 添加到onStart、onDrag 和onStop。 我还发现 react-draggable onStop 在 react-virtualized sort 之前被调用。

有什么想法吗？

Answer 1

只是对可拖动源代码的快速解析让我相信停止事件传播的 onClick 侦听器应该可以工作。但由于某种原因，它没有。 另一种快速的方法是将可拖动对象包装在一个 div 中，以停止点击事件传播。

https://codesandbox.io/s/ymov0zmwjx 在这里检查，刚刚在您的可拖动组件周围添加了一个包装器。 onStart、onStop、onDrag 在这里不起作用，因为它们在内部使用鼠标事件，而虚拟化表使用单击事件。