React react-sortable-hoc 取消重排序(Undo order changes)

Question

我正在使用 react-sortable-hoc 通过保存和取消按钮重新排序 table 行。但是，我找不到任何有关在重新排序行后单击取消按钮时恢复到原始顺序的信息或示例。

无法在 official documentation 或其他任何地方找到任何信息或示例。我觉得很奇怪，没有内置的取消功能，还是我遗漏了什么？

Answer 1

如果您想撤消顺序更改，那么您可以维护一个撤消堆栈。每次订单更改完成时，存储先前 data 状态的副本。单击撤消按钮时，您会从撤消堆栈弹出回到 data 状态。

添加一个undoStack到状态。

state = {
  data: range(1, 5).map((el) => ({
    name: `tester-${el}`,
    age: el,
    class: `Class-${el}`
  })),
  undoStack: [],
};

在撤消堆栈中缓存先前的 data 状态。在这里，我使用 slice 仅保留最后 10 个修订版，但这可以根据您的需要进行调整。

_handleSort = ({ oldIndex, newIndex }) => {
  this.setState((prevState) => ({
    data: arrayMove(prevState.data, oldIndex, newIndex),
    undoStack: [...prevState.undoStack, prevState.data].slice(-10),
  }));
};

处理撤消顺序更改并将撤消处理程序附加到按钮的 onClick 事件处理程序。

undo = () => {
  this.setState(prevState => {
    if (prevState.undoStack.length) {
      return {
        data: prevState.undoStack.pop(),
        undoStack: prevState.undoStack,
      };
    } else {
      return prevState;
    }
  })
};

...

<button type="button" onClick={this.undo}>
  Undo reorder
</button>

演示

如果您不关心中间修订，只是想重置为原始订单，那么只需捕获原始订单的缓存并重置 data。

const data = range(1, 5).map((el) => ({
  name: `tester-${el}`,
  age: el,
  class: `Class-${el}`
}));

class App extends React.Component {
  state = {
    data,
    originalData: data, // <-- store cache of original data
    undoStack: []
  };

  ...

  <button
    type="button"
    onClick={() => {
      this.setState({
        data: this.state.originalData // <-- restore from cache
      });
    }}
  >
    Reset
  </button>

两者都在链接的 codesandbox 中实现。

React react-sortable-hoc 取消重排序(Undo order changes)

React react-sortable-hoc cancel reordering(Undo order changes)

javascript

reactjs

react-sortable-hoc

演示