拖动以重新排序并使用 reactjs 保存状态

Question

我正在编写一个使用 react-sortable-hoc 的小应用程序

一切都很好，但我在显示按 order

排序的列表时遇到问题

我有

user 0
user 1
user 2

当我将用户 2 拖到用户 0 上方时 而不是得到

user 2
user 0
user 1

我明白了

user 2
user 1
user 0

我认为这与我在该州设置订单的方式有关。但我想不通。

这就是我在排序结束时设置顺序的方式

const onSortEnd = ({ oldIndex, newIndex }) => {

    setUsers(prevState => {
        const newItems = [...prevState];
        newItems[newIndex].order = oldIndex;
        newItems[oldIndex].order = newIndex;
        return newItems.sort((a, b) => a.order - b.order);
    })
};

这是正在运行的应用程序，因此您可以使用它。 https://codesandbox.io/s/winter-https-xelrd?fontsize=14&hidenavigation=1&theme=dark

Answer 1

我已经解决了， 这是与https://codesandbox.io/s/quizzical-colden-rm62y一起玩的工作网址

您猜对了，问题出在onSortEnd 函数上。我们只需要将它们向上或向下冒泡，而不是交换 newIndex 和 oldIndex 位置。

这是一个工作代码，可以稍微清理一下，但你明白了:)

const onSortEnd = ({ oldIndex, newIndex }) => {
    setUsers(prevState => {
      const newItems = [...prevState];

      if (oldIndex > newIndex) {
        for (let i = oldIndex - 1; i >= newIndex; i--) {
          newItems[i].order++;
          newItems[oldIndex].order = newIndex;
        }
      } else if (oldIndex < newIndex) {
        for (let i = oldIndex + 1; i <= newIndex; i++) {
          newItems[i].order--;
          newItems[oldIndex].order = newIndex;
        }
      }
      return newItems.sort((a, b) => a.order - b.order);
    });
  };

希望对您有所帮助。快乐编码:)

Answer 2

你所做的就是交换。

如果您只想“插入”新位置的元素，则必须更新两个位置之间的所有项目。

在您的情况下，一种方法是移动元素并为所有项目重新创建订单

setUsers(prevState => {
  const newItems = [...prevState];
  newItems.splice(newIndex, 0, newItems.splice(oldIndex, 1)[0]).forEach((item,index)=>{
    item.order = index;
  });

  return newItems
});

https://codesandbox.io/s/confident-river-mrh3p的演示

Answer 3

看起来您的代码只是在交换元素。这似乎不是您真正想要做的。实际上，您确实想删除元素并将其插入给定位置。我想既然你已经有了 oldIndex 和 newIndex，你可以按如下方式处理排序函数：

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setUsers(prevState => {
      var newItems = [...prevState];
      let elem = newItems[oldIndex]
      newItems.splice(oldIndex, 1)
      newItems.splice(newIndex, 0, elem)

     return newItems 
    });
  };

实际上不需要订单，并且捕获的状态超出了所需的最低状态（除非您在其他地方使用它）。