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

Question

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

不过我也希望table支持排序

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

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

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

之前被调用

有什么想法吗？

Answer 1

只要快速分析一下 draggable 的源代码，我就相信停止事件传播的 onClick 侦听器应该可以工作。但出于某种原因，它没有。 另一种快速的方法是将 draggable 包装在 div 中，这会停止点击事件传播。

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