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：使用示例中的錨標記是否可行？ 我不想使用onClick處理程序。

問題2： Link里面的checkbox不能切換， 看這個例子。 這是為什么？

Answer 1

從該示例鏈接中，將鏈接移動到僅圍繞文本看起來完全相同，但可以提供您想要的內容。

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

在可檢查區域內設置復選框聽起來不是很好的用戶體驗 - 用戶可能希望外部區域選中該復選框

Answer 2

我發現如果我使用onClick 、 React state和stopPropogation ，它就達到了你描述的效果。

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