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
上面绑定的事件是一样的
将
docuemnt
上的事件移除,就没有上述效果了
一定和Checkbox.Group
的实现有关系!
通过阅读源码,发现
Checkbox.Group
会统一渲染被其管理的Checkbox
选中时
checkboxGroup.value
的值为[undefined]
,props.value
的值都为undefined
没选中时,
checkboxGroup.value
的值为[]
这么一看主要问题时没有给
<Checkbox>
指定value属性!去掉
label
点击任意一个Checkbox
也会三个同时变化这期间还打了DOM 断点
也是怀疑在某个地方有个for循环,统一对值做了处理!然并卵。
似乎发现了新东西。