Question

我在正常触发的表格单元格上有一个onClick（React）处理程序，但是我想维护“在新标签中打开”功能，标记上有href给你。

当然，尝试将两者合并在一个元素上并不能正常工作：

<td onClick={this.someFunction} href="someLink">
  ...some content
<td>

之前我研究过嵌套在表格单元格中的锚标记跨越整个高度，所以只要右键单击单元格的内容，我就可以“在新标签页中打开”并保持{{1}表单元格元素上的处理程序。然而，这种方法存在各种问题，outlined here。

TLDR：覆盖会导致其他问题。解决方案存在各种兼容性问题。

所以我放弃了上面解释的方法。 /建议的想法？有没有办法让选项“在新标签中打开”而不必使用锚点/ href？

Answer 1

这里有两个选项，您可以使用JS在新的窗口/选项卡中打开它：

<td onClick={()=> window.open("someLink", "_blank")}>text</td>

但更好的选择是使用常规链接，但将其设置为表格单元格：

<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a>

Answer 2

@gunn的答案是正确的，target="_blank使链接在新选项卡中打开。

但这可能会对您的页面造成安全风险；您可以阅读here。有一个简单的解决方案：添加rel="noopener noreferrer"。

<a style={{display: "table-cell"}} href = "someLink" target = "_blank" 
rel = "noopener noreferrer">text</a>

Answer 3

最安全的解决方案，仅JS

如alko989所述，_blank（details here）存在一个主要的安全漏洞。

要从纯JS代码中避免使用它，

const openInNewTab = (url) => {
  const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
  if (newWindow) newWindow.opener = null
}

然后将其添加到您的onClick

onClick={() => openInNewTab('https://stackoverflow.com')}

根据您的需要，第三个参数也可以使用these optional values。

Answer 4

React + TypeScript 内联util方法：

const navigateToExternalUrl = (url: string, shouldOpenNewTab: boolean = true) =>
shouldOpenNewTab ? window.open(url, "_blank") : window.location.href = url;

Answer 5

以上答案正确。但这只是对我有用

target={"_blank"}

使用React中的onClick处理程序维护href“在新选项卡中打开”

5 个答案:

最安全的解决方案，仅JS