Флажок внутри 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 не может быть переключен, см. Этот пример . Почему это?

Answer 1

Я обнаружил, что если я использовал onClick, React state и stopPropogation, то он достиг эффекта, который вы описали.

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

Answer 2

Из этого примера ссылки перемещение ссылки только вокруг текста выглядит точно так же, но дает вам то, что вы хотите.

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

Наличие флажка внутри проверяемой области не похоже на хорошего пользователя опыт - пользователь может ожидать, что во внешней области будет установлен флажок