更新状态

Question

所以我的代码是：

export default class MyClass extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     data: [ 
      {id: 101, name:"One", thevalue:11}, 
      {id: 102, name:"Two", thevalue:22}, 
      {id: 103, name:"three", thevalue:33} 
     ] 
    } 
    } 

    handleOnPress() { 
    << HOW DO I CODE THIS ?? >> 
    I want to increase the number count in thevalue of the pressed item 
    } 

    render() { 
     return(
     <FlatList 
      data = {this.state.data} 
      renderItem = { 
       ({item}) => 
       <TouchableOpacity onPress={this.handleOnPress} > 
        <Text> {item.name} + {item.thevalue} </Text> 
       </TouchableOpacity> 
      } 
     /> 
    ) 
    } 
} 

我希望能够增加只有thevalue单击的项目的数量。所以我应该做一个setState对不对？但是我怎么知道我需要运行哪个项目呢？我是否需要将点击项目的id传递给函数？如果是的话，我该怎么做？

非常感谢。

UPDATE1：

handleOnPress(id) { 
     this.setState({ 
     thevalue: this.state.thevalue+1 
    }); 
} 

Answer 1

你必须给它的参数，所以我们知道什么产品来增加：

onPress={this.handleOnPress.bind(this, item.id)} 
... 
handleOnPress(id) { 
    // increment id 
} 

或者这是一个有点更具可读性，但做同样的东西：

onPress={() => this.handleOnPress(item.id)} 

Answer 2

你可以通过id至onPress然后更新相应的thevalue

export default class MyClass extends Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     data: [ 
 
      {id: 101, name:"One", thevalue:11}, 
 
      {id: 102, name:"Two", thevalue:22}, 
 
      {id: 103, name:"three", thevalue:33} 
 
     ] 
 
    } 
 
    } 
 

 
    handleOnPress(id) { 
 
    let {data} = this.state; 
 
    let idx = data.findIndex(x => x.id == id); 
 
    data[idx].thevalue ++; 
 
    this.setState({data}); 
 
    } 
 

 
    render() { 
 
     return(
 
     <FlatList 
 
      data = {this.state.data} 
 
      renderItem = { 
 
       ({item}) => 
 
       <TouchableOpacity onPress={() => this.handleOnPress(item.id)} > 
 
        <Text> {item.name} + {item.thevalue} </Text> 
 
       </TouchableOpacity> 
 
      } 
 
     /> 
 
    ) 
 
    } 
 
}