使用 react-native 根据 listView 中的 rowid 递增和递减值

Question

I am running a sample project. In my project i am using listView. If i am clicking on up-arrow button that the value will be increased and clicking on down-arrow button that the value will be decreased. When i click on any of these two buttons that the value will be changed in all rows in listView. How to change the value in only particular row in listView. Please give me any suggestion.

Here is my code:

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

Here is my screenshot:

Answer 1

count state variable is what you are using for all rows which will be the same since its an Integer, consider maintaining a state variable which is an object that will look something like this {rowId1: count1, rowId2, count2} Eg: {1: 15, 2: 10, 3: 20}

Since your callbacks send rowId as argument

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

Try setting the state in your incrementFunc like this

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 can be modified in a similar way.

And then in your listOfItems method

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

Answer 2

Have you tried to change the specific field in the array, instead of the total count? If you use rowHasChanged function, it has to detect changes only if it occurs.