Javascript 路由器链接内的复选框

我正在创建React中的实体列表。每个实体包装在一个链接中，并重定向到一个页面。在每个实体的链接中都有一个复选框和一个按钮，用于打开下拉列表：

<ul>
  <li>
    <Link to={url}>
      <label>
        <input type="checkbox" />
      </label>
      <h3>Entity name</h3>
      <time datetime="">2019-09-21</time>
      <button type="button">Dropdown</button>
    </Link>
  </li>
</ul>

实体名称
2019-09-21
下拉列表

如果用户单击复选框或下拉按钮，则不应重定向到页面，而应执行其他操作

问题1:使用示例中的锚定标记是否可行？我不想使用

onClick

处理程序

---

问题2:无法切换

链接中的复选框。为什么会这样？
从该示例链接中，仅在文本周围移动链接看起来完全相同，但可以满足您的需要

      <label style={{ display: "block" }}>
        <input type="checkbox" />
        <Link to="/">Inside the link</Link>
      </label>


链接内部

在可检查区域内设置复选框听起来并不是一种很好的用户体验-用户可能希望外部区域选中复选框
我发现，如果我使用
onClick
，React
state
，以及
stopproprogation
，它就达到了您描述的效果

<Link>
  <input
    checked={this.state.checked}
    type="checkbox"
    onClick={(e) => {
      e.stopPropagation();
      this.setState({ checked: !this.state.checked });
    }}
  />
</Link>


{
e、 停止传播（）；
this.setState（{checked:！this.state.checked}）；
}}
/>
为什么要将复选框包装在锚定标记中？因为整个区域应该是指向实体页面的链接，复选框除外，它应该选择实体页面。与Gmail界面类似。那么为什么不将复选框包装在标签中，而将其余的包装在锚定标签中呢？设计规范不是这样的：（我知道这很愚蠢，但由于填充和间距，链接应该包装整个复选框和下拉框。）