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

Posted 2023-04-15

【中文标题】如何在 FlatList 中记录其他事件？

【英文标题】：How to record other events in FlatList?

【发布时间】：2018-10-06 20:21:25

【问题描述】：

我正在使用 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，但不确定哪些方法可以帮助我？

【参考方案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>
          )
      
  

【讨论】：

谢谢你！它正在工作。只需对 CardItem 的 props 进行小修改，而不是 toggeled=item.id === this.state.toggledItem，它将是 `toggled=item.content_address === this.state.toggledItem `