组件化开发会让问题变得难以发现，切换子路由、弹出模态框等等

一 点击文字也能获得焦点

写法一

<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事件分发机制有关系，待后续验证。

完

念念不忘，必有回响！