美文网首页优美编程Web前端之路
label和Checkbox.Group的探索轶事

label和Checkbox.Group的探索轶事

作者: 小遁哥 | 来源:发表于2020-02-27 12:45 被阅读0次

    回顾之前帮别人解决bug的场景,多多少少有些入戏了。

          <label>
            测试
            <Checkbox.Group className="Group">
              <Checkbox>男</Checkbox>
              <Checkbox>女</Checkbox>
              <Checkbox>san</Checkbox>
            </Checkbox.Group>
          </label>
    
    

    点击label包裹的区域,复选框都被选中了。
    Checkbox.Group 替换成普通div
    点击测试只会选中第一个

          <label>
            测试
            <div className="Group">
              <Checkbox>男</Checkbox>
              <Checkbox>女</Checkbox>
              <Checkbox>san</Checkbox>
            </div>
          </label>
    
    

    移除Checkbox.Group上面绑定的class ,效果不变,可以判定和css样式无关

    Checkbox.Group和普通div上面绑定的事件是一样的

    image.png
    docuemnt上的事件移除,就没有上述效果了

    一定和Checkbox.Group 的实现有关系!


    通过阅读源码,发现Checkbox.Group 会统一渲染被其管理的Checkbox

    选中时checkboxGroup.value的值为[undefined],props.value的值都为undefined
    没选中时,checkboxGroup.value的值为[]
    这么一看主要问题时没有给<Checkbox>指定value属性!
    去掉label 点击任意一个Checkbox也会三个同时变化

    这期间还打了DOM 断点

    也是怀疑在某个地方有个for循环,统一对值做了处理!然并卵。
    似乎发现了新东西。

    相关文章

      网友评论

        本文标题:label和Checkbox.Group的探索轶事

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