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

javascript reactjs

2022-08-30 05:39:34

我在正确触发的表单元格上有一个onClick（React）处理程序，但是我想保持“在新选项卡中打开”功能，该功能具有on标签可以为您提供。href

当然，尝试在单个元素上组合两者并不能按预期工作：

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

以前，我考虑过在表格单元格内嵌套一个锚点标签跨越整个高度，因此每当右键单击单元格的内容时，我都可以“在新选项卡中打开”，并且仍然在表格单元格元素上保留处理程序。但是，这种方法存在各种问题，此处进行了概述。onClick

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

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

答案 1

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

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

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

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

答案 2

最安全的解决方案，仅限 JS

正如alko989所提到的，有一个重大的安全漏洞（详细信息在这里）。_blank

要从纯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