在用react写checkbox的时候,遇到了一点问题:
checkbox是动态生成的,最开始全部默认选中,点击某个checkbox,该checkbox的checked值发生改变,其他的保持不变;我写的是点击某一个checkbox,所有的都会发生改变,因为我最初给定的checked的状态都是一样的。
解决方法:
在生成checkbox之后,给定每个checkbox一个不同的状态
上图是动态生成checkbox的代码,大家可以看到我标记的部分,也是关键处,我给checked赋予了一个值item.checked,原本item中是没有checked的,是我在获取到this.props.wSpecial(wSpecial是我存在store中的state,它与下面的 game[index].config.wSpecialKind是一样的)这个数组的时候动态加上去的。
2、动态加上checked上图是动态生成checked的代码,通过循环给game[index].config.wSpecialKind添加上checked,并且全部设为true,然后在动态生成checkbox的时候可以获取到checked字段,即1图中的item.checked,然后将其赋给checked属性,这样就实现了在最开始的时候所有的checkbox默认选中。
接下来就是要处理点击某一个checkbox,checked值发生改变了;这个处理在onChange方法中。
3、onChange方法
图4
在图3中,可以看到在if/else判断里面,将checked的值改变了,改变之后记得更新state,因为我的state是存在store中的,所以写了一个方法来更新,相信熟悉redux的,对下面的两个图很容易理解;在图3中,我没有理解为什么要写this.setState(),个人觉得它没有用上,但是不写的话,虽然checkbox的checked值会发生改变,但是checkbox依旧是处在被选中的状态,只有加上才会有改变。
图5图6
以上就是我对checkbox问题的处理,我知道还有很多地方需要改进,可能在表述方面也有一些不清楚,希望各位可以多提一些建议,我会继续改进的!!!
网友评论