如何解决反应路由器链接中的按钮?
<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
是唯一的解决方案吗?
解决方法
您可以使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。