react checkbox问题

在用react写checkbox的时候,遇到了一点问题:
checkbox是动态生成的,最开始全部默认选中,点击某个checkbox,该checkbox的checked值发生改变,其他的保持不变;我写的是点击某一个checkbox,所有的都会发生改变,因为我最初给定的checked的状态都是一样的。
解决方法:
在生成checkbox之后,给定每个checkbox一个不同的状态

1、动态生成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问题的处理,我知道还有很多地方需要改进,可能在表述方面也有一些不清楚,希望各位可以多提一些建议,我会继续改进的!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容