使用 React 中的 onClick 处理程序维护 href“ open in new tab”

我在一个表格单元格上有一个 onClick (React)处理程序，它可以正确地触发，但是我想保持“在一个新的标签中打开”的特性，在标签上有一个 href就可以了。

当然，试图将两者结合在一个元素上并不像预期的那样奏效:

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

Previously I looked into having an anchor tag nested inside the table cell span the full height, so whenever the contents of the cell were right-clicked, I could "Open in a New Tab" and still keep an onClick handler on the table cell element. However there's various problems with that approach, 在这里概述.

TLDR: 重写会导致其他问题。解决方案有各种兼容性问题。

因此，我放弃了这种方法，转而采用上面解释的那种方法。有什么想法或建议吗？ Is there a way to have the option "Open in a New Tab" without having to use an anchor/href?

224367 次浏览
小开

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

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

但是一个更好的选择是使用一个常规链接，但是将其样式设置为表单元格:

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

React + TypeScript inline util 方法:

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

上面的答案是正确的，但这对我来说很简单

target={"_blank"}
小开

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

但是这对您的页面可能是一个安全风险; 您可以阅读有关它的 给你。有一个简单的解决方案: 添加 rel="noopener noreferrer"。

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

最安全的解决方案，只有 JS

正如醇989所提到的，_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')}

为了更简洁地反应，您可以直接返回一个函数

const onClickUrl = (url) => {
return () => openInNewTab(url)
}


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

对于 Typescript + 做出反应，以下是它们的外观:

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


export const onClickUrl = (url: string): (() => void) => () => openInNewTab(url)

第三个 window.open参数也可以采取 这些可选值，根据您的需要。


提交答案