使用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递增和递减值

回答

相关问题