美文网首页react
react checkbox问题

react checkbox问题

作者: shirley媛 | 来源:发表于2017-11-10 16:59 被阅读0次

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

    相关文章

      网友评论

        本文标题:react checkbox问题

        本文链接:https://www.haomeiwen.com/subject/nqwbmxtx.html