ReactJS持久排序

Question

我正在使用ReactJS构建一个web应用程序，并且在持久排序方面遇到了困难。该应用程序仅供公司使用，本质上是一个员工任务经理（类似于Pivitol Tracker）。它管理6名员工，每个员工都有一列，任务在垂直列表中从该列向下运行。

这个想法是允许拖动&删除任务排序，然后将其同步到服务器（使用PouchDB），并对所有正在运行的应用程序进行更改。我已经构建了UI，每个功能（添加、编辑、删除等）都是功能性的，但我不知道如何进行排序。

我正在构建每个任务：

var tasks = this.props.tasks.map(function(task) {
  if(!task.archive) {
    return <Task key={task.id} id={task.id} ...more props />
  }
});

然后，我只需在Render函数中调用{tasks}即可输出html。

我发现了一个有趣的插件Dragula，它启用了拖放功能，但我需要一些关于如何使其持久化的想法。我尝试捕获数组中任务ID的顺序，然后对返回的映射数据进行排序，但没有成功。

我该如何完成这项任务？我对ReactJS还比较陌生。

谢谢！

Answer 1

https://github.com/calitek/ReactPatternsReact.14/DragAndDrop。这里有一些；

let list = [
  {id: 'l1', label: 'first line of list'},
  {id: 'l2', label: 'second line of list'},
  {id: 'l3', label: 'third line of list'},
  {id: 'l4', label: 'fourth line of list'},
  {id: 'l5', label: 'fifth line of list'},
  {id: 'l6', label: 'sixth line of list'},
  {id: 'l7', label: 'seventh of list'},
  {id: 'l8', label: 'eighth line of list'},
  {id: 'l9', label: 'nineth line of list'},
  {id: 'l10', label: 'tenth line of list'},
  {id: 'l11', label: 'eleventh line of list'},
  {id: 'l12', label: 'twelth of list'},
  {id: 'l13', label: 'thirteenth line of list'},
  {id: 'l14', label: 'fourteenth line of list'},
  {id: 'l15', label: 'fifteenth line of list'}
]
class DndCtrlRender extends React.Component {
  render() {
    let isMobile = this.props.isMobile;
    return (
      <div id='DndCtrlSty' className='FlexBox' style={DndCtrlSty}>
        <DList data={list} isMobile={isMobile} />
        <DList data={this.state.list} dndDone={this.dndDone} />
      </div>
    );
  }
}
export default class DndCtrl extends DndCtrlRender {
  constructor() {
    super();
    this.state = {list: _ld.cloneDeep(list)};
    this.savedItemID = '';
  }
  dndDone = (startID, endID) => {
    let newList = this.state.list;
    let startObj = _ld.findWhere(newList, {id: startID});
    let startIndex = _ld.indexOf(newList, startObj);
    newList.splice(startIndex, 1);
    let endObj = _ld.findWhere(newList, {id: endID});
    let endIndex = _ld.indexOf(newList, endObj) + 1;
    newList.splice(endIndex, 0, startObj);
    this.setState.list = newList;
  }
}