反应路由器链接中的按钮？

Question

假设我有一个具有以下结构的元素：

<Link to={`/games/${game.id}`}>
  <GameInfo/>
  <CustomButton/>
</Link>

链接内的按钮是否可以在不使用 z-index css 属性的情况下独立于下方的链接运行？我想这样做，同时保持当前行为，即悬停按钮会触发按钮和下方链接的悬停效果。

现在，如果我点击 Add to Library 按钮，游戏会被添加到库中，但下面的链接也会被触发，并且游戏资料页面会打开，这不是预期的。

目前我能想到的唯一解决方案是这样的：

  <div> // <= move link hover effects here
    <Link to={`/games/${game.id}`}>
      <GameInfo/>
    </Link>

    <CustomButton/>
  </div>

但这并不理想，因为我仍然希望按钮周围的区域成为链接的一部分（所以悬停和链接本身在下面显示的区域中工作）。

z-index 是唯一的解决方案吗？

Answer 1

您可以使用 preventDefault 和 stopPropagation 来实现这个内部按钮点击使用，如下所示

<Link to="/game">
      <div>
      
        <button
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
           //function to do your stuff
          }}
        >
         Click Me
        </button>
      </div>
    </Link>

你可以在这里查看演示

https://codesandbox.io/s/adoring-sun-dwnde?fontsize=14&hidenavigation=1&theme=dark