如何更改react native GridView组件中的可见性状态？

我正在使用react native GridView组件，我想更改GridView项单击时的可见性状态

所以我有一个列表颜色网格，但当我点击单个项目时，它应该选择并显示一个勾号

表格项目

选择上的网格项目

代码：

导出默认类过滤器扩展组件{
构造函数（）{
超级（）；
此.state={
gridDataSourceColor:filterColor，
isVisible:false，
};
}
render（）{
返回(
);
}
未压缩（项目）{
}
渲染颜色（项目）{
返回(
);
}
}

因此，在上面的代码中，当我执行ONIMPRESSED（）时，它应该更改状态并显示记号标记

---

请仔细阅读我的帖子，并向我推荐一些解决方案。

在

过滤器颜色

的项目中选择

isSelected

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

未压缩（项目）{
var tempFilterColor=this.state.gridDataSourceColor；
对于（变量i=0；i

在

过滤器颜色

的项目中选择

isSelected

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

未压缩（项目）{
var tempFilterColor=this.state.gridDataSourceColor；
对于（变量i=0；i

嘿，我正在设置isSelected=true，就像这个var tempFilterColor=this.state.gridDataSourceColor；this.setState（{gridDataSourceColor:[{isSelected:true}]}）；嘿，我是这样做的，但它没有设置值var tempFilterColor=this.state={gridDataSourceColor:[{id:item.id，isSelected:true}]，}；this.setState（{gridDataSourceColor:tempFilterColor}）；var tempFilterColor=item.isSelected；您可以获取temp变量并为其分配当前状态。然后将

isSelected

更改为列表中的特定项。更改后，只需使用临时变量设置state。对于您的解决方案，主要提示是

renderCheckMark

method再次感谢，我得到了您的逻辑，您能告诉我这个逻辑是否正确吗；嘿，我正在设置isSelected=true，就像这个var tempFilterColor=this.state.gridDataSourceColor；this.setState（{gridDataSourceColor:[{isSelected:true}]}）；嘿，我是这样做的，但它没有设置值var tempFilterColor=this.state={gridDataSourceColor:[{id:item.id，isSelected:true}]，}；this.setState（{gridDataSourceColor:tempFilterColor}）；var tempFilterColor=item.isSelected；您可以获取temp变量并为其分配当前状态。然后将

isSelected

更改为列表中的特定项。更改后，只需使用临时变量设置state。对于您的解决方案，主要提示是

renderCheckMark

method再次感谢，我得到了您的逻辑，您能告诉我这个逻辑是否正确吗；