javascript - React Router Link 内的复选框

Question

我正在 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>

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

问题 1: 使用示例中的 anchor 标记是否可行？我不想使用 onClick 处理程序。

问题2:链接内的复选框无法切换，see this example 。这是为什么？

Answer 1

从该示例链接中，将链接移动到仅围绕文本看起来完全相同，但可以提供您想要的内容。

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

在可检查区域内设置复选框听起来并不是很好的用户体验 - 用户可能希望外部区域选中该复选框