javascript - ReactJS持久排序

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

谢谢！

最佳答案

在https://github.com/calitek/ReactPatterns React.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;
  }
}

关于javascript - ReactJS持久排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33882033/