如何使 Material UI 图标表现得像锚标签？

Posted 2023-03-05

【中文标题】如何使 Material UI 图标表现得像锚标签？

【英文标题】：How to make Material UI icon to act like anchor tag?

【发布时间】：2020-04-16 16:41:34

【问题描述】：

我有这个来自 Material UI 的图标，我希望它可以点击并打开一个新窗口到 www.linkedin.com

我应该使用 href="Linkedin.com" 吗？或添加 onClick ？我希望它也能打开一个新标签/窗口

【问题讨论】：

方法有很多。您还可以在按钮中显示该图标，并且按钮本质上是可点击的。无论如何，如果你决定做一些动作 onClick 使用 target=_blank 属性来显示一个新标签，比如 ***.com/q/45046030/4636715

@vahdet 我已经看到了这个解决方案，但是如果我使用例如 www.google.com，我会得到一个带有 localhost.www.google.com 的新窗口，我该如何解决？

我认为您应该分享您当前的代码并将您的问题缩小到前缀本地主机的事情。否则，当我们尝试逐步解决问题时，它会变成在这里聊天。这是好事 :)

只需将你的图标包裹在一个锚标签<a>中。

@vahdet 我只是复制了您添加到答案中的代码：X

【参考方案1】：

这应该使用 Material-UI 图标：

import LinkedInIcon from '@material-ui/icons/LinkedIn';
import IconButton from '@material-ui/core/IconButton';

<IconButton aria-label="Linkedin.com" onClick=() => window.open('https://www.Linkedin.com')>
  <LinkedInIcon fontSize="large" />
</IconButton>

打开一个新页面：

onClick=() => window.open(newPageUrl, "_blank")

在同一个上打开：

onClick=() => window.location.replace(newPageUrl)

CodeSandBox

【讨论】：

谢谢你的回答，但是当我点击它时，我得到一个新窗口 localhost:3000/www.linkedin.com ...

现在完成了

当我使用 window.open newPageUrl 空白点击它时，我得到这个网址：localhost:3000/www.linkedin.com

onClick=() => window.open("https://www.Linkedin.com") 如果您不添加协议，它会将其附加到您的实际网址。

<IconButton href="https://linkedin.com" /> 应该适用于大多数用例。见：github.com/mui-org/material-ui/issues/6243

【参考方案2】：

有两种方法可以帮助你

您可以在标签中使用标签插入图标并将 href="(URL)" 作为 属性到标签中 您也可以使用 javascript onclick 函数，如下例所示 https://www.Linkedin.com=' + this.selectedIndex;"" >