更新狀態

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