react-sortable-hoc：处理列表项上的点击事件

Question

这个问题是关于https://github.com/clauderic/react-sortable-hoc。我对 React 还很陌生，所以我觉得以下内容有点令人恼火。转到 https://jsfiddle.net/7tb7jkz5/。通知第4行

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={console.debug(value)}>{value}</li>);

当您运行代码时，控制台将记录“Item 0”到“Item 99”。单击某个项目将记录相同的信息，但会记录三次。为什么会出现这种情况？这真的有必要还是更像是一个错误？

我期望与普通 DOM 类似的行为，因此单击事件将从被单击的项目中冒出，并且可以通过其祖先捕获。在我看来，观察到的行为就像列表将向每个列表项发送三次单击事件。

更新： 嗯，这实际上像水晶一样清晰，感谢您指出这一点，Shubham。我不仅指定了引用，还指定了对 console.debug 的实际调用，每次计算表达式时都会执行该调用。常见的错误。

尽管如此，这意味着当我单击其中一个列表项时，每个列表项都会被渲染（我猜）三次。我怀疑缺少优化，甚至无用的重画。

Answer 1

distance={1}尝试在 SortableContainer 组件上使用。

检查此链接https://github.com/clauderic/react-sortable-hoc/issues/461

const ListItemContainer = SortableContainer((props) => {
  return <listItem />
})

<ListItemContainer               
   onSortEnd={this._orderingFolder}
   lockAxis='y'
   lockToContainerEdges={true}
   lockOffset='0%'
   distance={1}
/>