使用 react-native 根據 listView 中的 rowid 遞增和遞減值

Question

我正在運行一個示例項目。 在我的項目中，我使用的是 listView。 如果我單擊向上箭頭按鈕該值將增加並單擊向下箭頭按鈕該值將減少。 當我單擊這兩個按鈕中的任何一個時，listView 中所有行中的值都會更改。 如何僅更改 listView 中特定行的值。 請給我任何建議。

這是我的代碼：

class Example extends Component {
  constructor(props){
      super(props);
      this.state={
        dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
         count:1,
      }
    }

incrementFunc(rowID:number, listItems){

        this.setState({
          count : this.state.count + 1
        },()=>{
          this.setState({
       dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(array)
          })
        })
      }
      decrementFunc(rowID:number,listItems){
        this.setState({
          count : this.state.count- 1
        },()=>{
          if(this.state.count <= 1){
            this.setState({
              count : 1
            })
          }
        },()=>{
          this.setState({
     dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(array)
          })
        })
      }
listOfItems(listItems, sectionID:number, rowID:number){
          return(
  <View style = {styles.buttonContainer}>
          <View style={styles.arrowsView}>
          <TouchableOpacity onPress ={this.incrementFunc.bind(this, rowID, listItems )}>
          <Image style={styles.arrowStyle} source={require('@images/up-arrow.png')} />
          </TouchableOpacity>

          </View>
          <View style={styles.numberView}>
          <Text style={{fontSize:15, color:'black'}}>{this.state.count}
            </Text>

          </View>
          <View style={styles.arrowsView}>
          <TouchableOpacity onPress ={this.decrementFunc.bind(this, rowID, listItems)}>
          <Image style={styles.arrowStyle} source={require('@images/down-arrow.png')} />
          </TouchableOpacity>
          </View>
          </View>
)
}
render(){
      return(
<View style={styles.listview}>
        <ListView
             dataSource={this.state.dataSource}
             renderRow={this.listOfItems.bind(this)}/>
        </View>
);
}
}

這是我的截圖：

Answer 1

count狀態變量是您用於所有行的內容，因為它是整數，因此所有行都相同，考慮維護一個狀態變量，該變量是一個看起來像這樣的對象{rowId1: count1, rowId2, count2} Eg: {1: 15, 2: 10, 3: 20}

由於您的回調發送rowId作為參數

<TouchableOpacity onPress ={this.incrementFunc.bind(this, rowID, listItems )}>

嘗試像這樣在incrementFunc設置狀態

incrementFunc(rowID:number, listItems){
    let count = {...this.state.count}
    count[rowId] = count[rowId] || 0;
    count[rowId] += 1;
    this.setState({ count },
      ()=>{
      this.setState({
   dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(array)
      })
    })
  }

decrementFunc 可以用類似的方式修改。

然后在你的listOfItems方法中

<Text style={{fontSize:15, color:'black'}}>
   {this.state.count[rowId]}
</Text>

Answer 2

您是否嘗試更改數組中的特定字段，而不是總數？ 如果您使用 rowHasChanged 函數，它必須僅在發生更改時檢測更改。