ReactJS 持久排序答案

【问题标题】：ReactJS Persistant SortingReactJS 持久排序
【发布时间】：2016-02-26 04:59:36
【问题描述】：

我正在使用 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 比较陌生。

谢谢！

【问题讨论】：

标签： javascript sorting reactjs dragula

【解决方案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;
  }
}

【讨论】：