如何在 FlatList 中记录其他事件？

Question

我正在使用 FlatList 来呈现项目。每个项目都是一个单独的卡片样式组件。每个项目都有onPress 更改组件的事件处理程序。

这是我的平面列表。

<FlatList
  data={data}
  renderItem={({ item }) => {
    return <CardItem courseData={item} />
  }}
  ref={this.flatList}
  keyExtractor={
    (item) => { return item.content_address }
  }
  initialNumToRender={10}
  showsVerticalScrollIndicator={false}
  style={{ marginTop: 50 }}
/>

这是 CardItem 组件

constructor{
    this.state = {change:false}
} 

_onPress = () => {
    this.setState({change: true})
}

render() {
    if (this.state.change) {
        return (//return changes)
    } else {
        return (
            <TouchableOpacity
                ref="myRef"
                activeOpacity={0.5}
                onPress={this._onPress}>
                ... 
            </TouchableOpacity>
        )
    }
}

现在我想要的是一次只更改一个卡片组件。

因此，当用户触摸第一个卡片组件时，它应该会发生变化。但是当用户触摸第二张卡片组件时，第一张应该变回之前的状态，第二张应该改变。

我看到了 FlatList 文档here，但不确定哪些方法可以帮助我？

Answer 1

如果您将切换的项目存储在父状态中，您可以相应地检查和渲染。此外，在子状态中存储切换值会导致一个错误，如果项目足够远离屏幕，它将被卸载，并且子组件的内部状态将被重置。这会导致您的列表中出现不希望的切换。在父组件中存储状态将有助于解决这个问题。

示例

class App extends Component {
  constructor() {
    this.state = { toggledItem: null }
  }

  onPressItem = (itemId) => {
    this.setState({toggledItem: itemId})
  }

  render() {
    <FlatList
      data={data}
      renderItem={({ item }) => {
        return <CardItem 
                  courseData={item} 
                  onPress={this.onPressItem} 
                  toggeled={item.id === this.state.toggledItem} 
                />
      }}
      ref={this.flatList}
      keyExtractor={
          (item) => { return item.content_address }
      }
      initialNumToRender={10}
      showsVerticalScrollIndicator={false}
      style={{ marginTop: 50 }}
    />
  }
}

---

class CardItem extends Component {
  _onPress = () => {
    this.props.onPress(this.props.courseData.id)
  }
  render() {

      if (this.props.toggeled) {
          return (//return changes)
      } else {
          return (
              <TouchableOpacity
                  ref="myRef"
                  activeOpacity={0.5}
                  onPress={this._onPress}>
                  ... 
              </TouchableOpacity>
          )
      }
  }
}