组件化开发会让问题变得难以发现,切换子路由、弹出模态框等等
一 点击文字也能获得焦点
写法一
<label for="male"> 姓名: <input type="text" id="male" /> </label>
写发二
<label> 姓名: <input type="text" /> </label>
写法三
<label for="address"> 姓名: </label>
<input type="text" id="address" />
二 checkbox 加:checked 实现切换逻辑
HTML
<input type="checkbox" id="toggle-id" />
<label for="toggle-id">
<div class="show-text">显示</div>
<div class="hide-text">隐藏</div>
</label>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsa
delectus labore vitae ullam nulla saepe, totam nihil odit sed eius facere
incidunt quo possimus, pariatur porro repudiandae? Animi, qui.
</div>
CSS
#toggle-id {
display: none;
&:checked + label ~ .content {
display: block;
}
&:checked + label > .hide-text {
display: block;
}
&:checked + label > .show-text {
display: none;
}
+ label > .show-text {
display: block;
}
+ label > .hide-text {
display: none;
}
+ label ~ .content {
display: none;
}
}
初始效果:
切换效果:
三 for 加 id 重复造成的困惑
input
<label for="male"> 姓名1: <input type="text" id="male" /> </label
><br /><br />
<label for="male"> 姓名2: <input type="text" id="male" /> </label>
点击姓名二也是第一个input
获得焦点
radio
<label for="Fruit"
><input id="Fruit" name="Fruit" type="radio" value="" />苹果1
</label>
<br /><br />
<label for="Fruit"
><input id="Fruit" name="Fruit" type="radio" value="" />苹果2
</label>
点击苹果二也是苹果一被选中
4 antd的Checkbx.Group
点击lable包裹的区域会选中全部
<label>
测试
<Checkbox.Group className="Group">
<Checkbox>男</Checkbox>
<Checkbox>女</Checkbox>
</Checkbox.Group>
</label>
初步猜测和React事件分发机制有关系,待后续验证。
网友评论