javascript - react native : Change and keep the background color of only onPressed item inside Flatlist

Question

我已经通过将 item.id 分配给状态来设法更改 Flatlist 中 onPressed 按钮的背景颜色。我的问题是，当我按下另一个按钮时，之前按下的按钮变回初始背景颜色。如何在按下另一个按钮时保持新的背景颜色？

 onPressButtonarrived(item.id) {
    this.setState({ disablearrived: item.id })
    this.setState({ colorarrived: item.id })
  }


<View style={{backgroundColor: item.id === this.state.colorarrived ? '#D6D6D6' : '#E5C454'}}>
    <TouchableOpacity
    onPress={() => {this.onPressButtonarrived(item.id)}} disabled={item.id === this.state.disablearrived ? true : false}>
    <Text>Arrival</Text>
</TouchableOpacity>

Answer 1

您需要为每个项目设置一些状态值:

 onPressButtonarrived(item.id) {
        this.setState({ [item.id +'-disablearrived']: !this.state[item.id] });
        this.setState({ [item.id +'-colorarrived']: !this.state[item.id] });
        // that should toggle some true false vars for each item.id 
      }


    <View style={{backgroundColor: this.state[item.id +'-colorarrived'] ? '#D6D6D6' : '#E5C454'}}>
        <TouchableOpacity
        onPress={() => {this.onPressButtonarrived(item.id)}} disabled={!!this.state[item.id +'-disablearrived']}>
        <Text>Arrival</Text>
    </TouchableOpacity>