反応ネイティブを使用したlistViewのrowidに基づく増減値

Question

サンプルプロジェクトを実行しています。私のプロジェクトでは、私はlistViewを使用しています。上向き矢印ボタンをクリックして値を増やし、下向き矢印ボタンをクリックすると値が減少します。これら2つのボタンのいずれかをクリックすると、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状態変数はその整数は、Aの維持を検討するので、あなたが同じになりますすべての行のために使用しているものですこのようなものになるオブジェクトである状態変数{rowId1: count1, rowId2, count2}Eg: {1: 15, 2: 10, 3: 20}

あなたのコールバックは、引数としてrowIdを送信するので、

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

decrementFuncは、同様の方法で変更することができ、あなたの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) 
     }) 
    }) 
    } 

状態を設定してみてください。

そしてあなたlistOfItems方法で

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

Answer 2

は、あなたの代わりに総数の、配列内の特定のフィールドを変更しようとしたことがありますか？ rowHasChanged関数を使用する場合は、変更が検出された場合にのみ変更を検出する必要があります。