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} {{ 1}}

由于你的回调发送Eg: {1: 15, 2: 10, 3: 20}作为参数

rowId

尝试在此<TouchableOpacity onPress ={this.incrementFunc.bind(this, rowID, listItems )}>中设置状态

incrementFunc

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

然后在您的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

Answer 2

您是否尝试更改数组中的特定字段，而不是总计数？如果使用rowHasChanged函数，则只有在发生更改时才必须检测更改。

使用react-native在listView中基于rowid的递增和递减值

2 个答案: