优美编程Web前端之路

label和Checkbox.Group的探索轶事

2020-02-27  本文已影响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循环,统一对值做了处理!然并卵。
似乎发现了新东西。
上一篇下一篇

猜你喜欢

热点阅读