反应反应-可排序-特别取消重新排序(撤消订单更改)

Question

我使用react-sortable-hoc重新排序表行，并使用Save和Cancel按钮。但是，在重新排序的行之后单击Cancel按钮时，我无法找到任何关于恢复到原始订单的信息或示例。

无法在正式文件或其他任何地方找到任何信息或示例。在我看来，没有内置的cancel函数，或者我遗漏了什么，这似乎很奇怪？

编辑： 示例代码

Answer 1

如果要撤消顺序更改，则可以维护撤消堆栈。每次订单更改完成时，保存前一个data状态的副本。单击“撤消”按钮后，从“撤消”堆栈弹出进入data状态。

1. 将undoStack添加到状态。 state ={ data: range(1，5).map((el) => ({ name：tester-${el}，age: el，class：Class-${el} }))，undoStack：[]，}；
2. 在撤消堆栈中缓存以前的data状态。在这里，我使用片只保留最后10个修订，但这可以调优，以满足您的需要。 _handleSort = ({ oldIndex，newIndex }) => { this.setState((prevState) => ({ data: arrayMove(prevState.data，oldIndex，newIndex)，undoStack：...prevState.undoStack，prevState.data.slice(-10)，})；}；
3. 处理取消顺序更改，并将撤消处理程序附加到按钮的onClick事件处理程序。 撤消= () => { this.setState(prevState => { if (prevState.undoStack.length) {返回{ data: prevState.undoStack.pop()，undoStack: prevState.undoStack，}；}prevState{返回prevState；}) }；.撤消重新排序

演示

​

​

如果您不关心中间版本，而只是想要重置到原来的顺序，那么只需捕获原始订单的缓存并重置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>

这两者都是在链接代码框中实现的。