Question

我正在使用react-native-sortable-listview通过拖放来改变列表项的顺序。仅再次拖动项目，以便更新其位置，但其他位置具有其先前的位置。当此组件由其他原因（如某些增量按钮）重新渲染时，所有位置都是正确的。所以我的问题是当我的react-native-sortable-list被渲染时我怎么能再次重新渲染它。由forceUpdate()和this.setState()呈现的两种方式都无法跟进，因为我无法在渲染函数中更新状态。这可能是一种可行的方法。

Answer 1

尝试使用componentWillMount或componentDidMount：

componentWillMount = () => {
  this.setState({
    data: myData
  });
}

基本上在渲染组件的任何阶段，您需要捕获该事件并调用setState（）;您也可以通过按钮重新渲染。用户单击一个按钮，然后你setState（）;希望这有帮助！

Answer 2

我不知道该列表，但应该有一些属性，如onDrop或类似的东西。您可以将一个函数传递给可能开始对列表进行排序的事件处理程序，您正在传入。

是这个清单吗？

https://www.npmjs.com/package/react-native-sortable-list

我会尝试onReleaseRow事件处理程序所做的事情。也许是这样的：

<SortableList onReleaseRow{() => this.sortList() data={this.state.data}}/>

sortList() {
let sortedData = //sort data somehow
this.setState({
    data: sortedData})
}

Answer 3

您可以将open class G class H : G() abstract class F { abstract val g: G } class I : F() { override var g : H = H() }功能传递给您的可排序列表。 ReactNativeList接受一个名为onChangeOrder的prop，每次更改行顺序时都会调用它。

reRender

Answer 4

好的，我找到了一种重新渲染的方法，如下所示。

  <SortableListView
      key={this.state.count}
      data={this.state.allObj}
      order={this.state.order}
      activeOpacity={0.5}
      onRowMoved={e => {
        this.setState({ count: this.state.count + 1 });
        this.props.arrangedMilestoneList(e);
        console.log('onRowMoved is called');
      }}
      onMoveEnd={() => console.log('onMoveEnd is fired')}
      renderRow={(row, s1, i) => this.renderOneDraggableMilestone(row, s1, i)}
    />

我正在做的是向SortableListView添加了一个关键属性，并在每个onRowMoved操作上更新此密钥。因此，它会导致重新渲染。

渲染后更新React组件

4 个答案: