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

Question

我在表格单元格上有一个 onClick (React) 处理程序，可以正常触发，但是我想保持“在新选项卡中打开”功能，在标签上有一个 href 给你。

当然，尝试将两者结合在一个元素上不会按预期工作：

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

以前我研究过在表格单元格内嵌套一个锚标记跨越整个高度，所以每当右键单击单元格的内容时，我可以“在新选项卡中打开”并仍然保留 onClick 处理程序在表格单元格元素上。但是，这种方法存在各种问题，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

最安全的解决方案，仅限 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')}

为了更简洁的react，你可以直接返回一个函数

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

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

对于 Typescript + React，以下是它们的样子：

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参数也可以取these optional values，根据你的需要。

Answer 3

@gunn 的回答是正确的，target="_blank 使链接在新标签页中打开。

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

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

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"}