如何在 React 中使锚标记内的按钮可点击？

Question

我知道存在一些相关问题，但除了说这是不可能的之外，没有一个真正有答案。 我想要实现的是在锚标记内有一个下拉按钮，这样用户可以在点击时被重定向，但也有可能与按钮本身交互，因为它是一个多选下拉菜单。 现在，一旦用户单击按钮，锚标记就会重定向用户，而不会对按钮产生任何影响。

只是为了让您了解代码的样子，这里是最小的复制：

  <a href="some_location">
          <span>Some text</span>

          <div>
            <button>My Dropdown button</button>
          </div>
        </a>

Answer 1

---

我认为它可以帮助你

const myComp = () => {

handelBtn = (e) => {
    e.stopPropagation();
    // OR
    e.preventDefault();
}
return (
    <a href="some_location">
        <span>Some text</span>

        <div>
            <button onClick={handelBtn}>My Dropdown button</button>
        </div>
    </a>
)
}

Answer 2

我认为这可以帮助你。

它适用于 <Link> 组件和 <a> 标签。 这里 <a> 标签将包裹在 div(card) 周围，点击时 div 将用作 <a> 标签。 该按钮将位于 <a> 标记上方，并且可以单击。

const myComp = () => {

return (
    <div class="card">
      <a href="some_location"> </a>
      <span>Some text</span>

      <div>
        <button>My Dropdown button</button>
      </div>
    </div>
)

.card {
    position: relative;
 }
 .card > a {
   position: absolute;
   inset: 0;
 }
 .card  button {
   position: relative;
 }