如何在反应原生GridView组件中更改可见性状态？

Question

我正在研究react-native GridView组件，我想要更改GridView项目单击的可见性状态。

所以我有一个列表颜色网格，但是当我点击单个项目时，它应该选择并显示一个刻度标记。

export default class filter extends Component { 
    constructor() { 
    super(); 
     this.state = { 
      gridDataSourceColor: filterColor, 
      isVisible: false, 
    }; 
    } 
render() { 
    return (
     <View> 
      <GridView 
       items={this.state.gridDataSourceColor} 
       itemsPerRow={6} 
       renderItem={this.renderColorItem.bind(this)} 
      /> 
     </View> 
    ); 
} 

onItemPressed(item){ 

} 

renderColorItem(item){ 
    return(
    <TouchableHighlight key={item.id} onPress={this.onItemPressed.bind(this, item)}> 
     <View 
      key={item.id} 
      style={{ 
       width: 50, 
       height: 45, 
       marginLeft: 2, 
       marginRight: 2, 
       justifyContent: 'center', 
       alignItems: 'center', 
       marginTop: 5, 
       backgroundColor: item.color}}> 

       <Image 
        style={{ 
         width: 25, 
         height:25}} 
        source={require('../images/check_mark_icon.png')} /> 
     </View> 
    </TouchableHighlight> 
); 
} 
} 

：在选择

代码

网格项目

电网项目

所以上面的代码，当我做onItemPressed（）时，它应该改变状态并显示刻度标记。

请通过我的帖子，并建议我一些解决方案。

Answer 1

以isSelected于filterColor的产品。

onItemPressed(item){ 
var tempFilterColor = this.state.gridDataSourceColor; 
    for (var i=0; i< tempFilterColor.length; i++) 
    { 
     if (tempFilterColor[i].id == item.id) { 
     tempFilterColor[i].isSelected = true; 
     break; //Stop this loop, we found it! 
    } 
    } 
    this.setState({ gridDataSourceColor : tempFilterColor}); 
} 

renderColorItem(item){ 
    return(
    <TouchableHighlight key={item.id} onPress={this.onItemPressed.bind(this, item)}> 
     <View 
      key={item.id} 
      style={{ 
       width: 50, 
       height: 45, 
       marginLeft: 2, 
       marginRight: 2, 
       justifyContent: 'center', 
       alignItems: 'center', 
       marginTop: 5, 
       backgroundColor: item.color}}> 

       {this.renderCheckMark(item)} 
     </View> 
    </TouchableHighlight> 
); 
} 

renderCheckMark(item) 
{ 
    if(item.isSelected) { // image render only if item selected 
     return(
     <Image 
        style={{ 
         width: 25, 
         height:25}} 
        source={require('../images/check_mark_icon.png')} /> 
     ); 
    } 
}