仅更新单击元素的状态

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

我希望能够增加仅单击项目的值的计数。所以我应该做一个setState对吗？但是我怎么知道我需要在哪个项目上运行它呢？是否需要将单击项目的id传递给函数？如果是，我该怎么做？

非常感谢。

更新：

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




Answer 1

您可以将id传递到on按然后更新相应的值

html prettyprint-override">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>
            }
        />
    )
  }
}

Answer 2

您必须给它一个参数，以便我们知道要增加的项：

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

或者这更容易理解，但做同样的事情：

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