使用react-native在listView中基於rowid遞增和遞減值

我正在運行一個示例項目。在我的項目中，我使用listView。如果我點擊向上箭頭按鈕，數值會增加，點擊向下箭頭按鈕，數值會減少。當我點擊這兩個按鈕中的任何一個時，值將在listView中的所有行中更改。如何更改listView中特定行的值。請給我任何建議。使用react-native在listView中基於rowid遞增和遞減值

這裏是我的代碼：

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> 
); 
} 
}

這裏是我的截圖：

來源

2017-10-17 Harika Bhavani Sai Nammi

因爲您已經爲所有項目使用了一個狀態....並且您正在減少/增加該狀態...所以它影響了所有項目。 –

什麼？你能解釋一下嗎 – Lavaraju

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>

來源

2017-10-17 07:38:55

我得到一個錯誤：找不到變量rowID –

究竟是哪一種方法？ –

我會像這樣修改我的增量功能。 incrementFunc（listItems，rowID：number）{count = {... this.state.count} count [rowId] = count [rowId] || 0; count [rowId] + = 1; （數組）{}}這個.setState（{count}，（）=> {this.setState（{rowHasChanged：（r1，r2）=> r1！== r2}）。cloneWithRows（array ） }） }） } –

你有沒有嘗試過的，而不是總數量來改變陣列中的特定領域，？如果使用rowHasChanged函數，則只有在發生更改時才能檢測到更改。

來源

2017-10-17 08:20:35 Yossi

使用react-native在listView中基於rowid遞增和遞減值

回答

相關問題