Meteor：未调用 sortablejs 方法答案

【问题标题】：Meteor: sortablejs method not being calledMeteor：未调用 sortablejs 方法
【发布时间】：2017-05-02 01:58:41
【问题描述】：

我有一个组件，简化后看起来像这样：

import Sortable from 'react-sortablejs';

class App extends Component {

  constructor(props) {
    super(props);
  }

  updateItemOrder() {
    let items = this.props.items;
    items.forEach((item, index) => {
      console.log(item._id);
      console.log(index);

      updateItem.call({ _id: item._id, update: { priority: index } });
    });
  };

  render() {
    <Sortable
      tag='ul'
      className='item-list list-group'
      onChange={ this.updateItemOrder() }>
        { this.renderItems() }
    </Sortable>
  }
}

我的控制台在页面加载时列出了item._id 和index，但是当我在可排序列表中拖放项目时没有任何反应。更改为 <ReactSortable> 组件也无济于事（根据 docs）。

【问题讨论】：

标签： node.js reactjs meteor

【解决方案1】：

从您上面的代码中，特别是这里的这一部分，

updateItemOrder() {
    let items = this.props.items;
    items.forEach((item, index) => {
      console.log(item._id);
      console.log(index);

      updateItem.call({ _id: item._id, update: { priority: index } });
    });
  };

您似乎正在尝试改变 props，这是不可行的。要在 react 中导致重新渲染，您需要更新 state 并告诉 react 这个更改是 state 应该导致重新渲染。这是使用setState 完成的。蝙蝠的权利有 2 个选项。首先，您可以在该组件的本地状态中捕获您的道具并对其进行更新，或者您可以在父组件中调用一个方法来更新其状态，从而强制它重新渲染。

【讨论】：