维持href“在新标签页中打开”在React中使用onClick处理程序 [英] Maintaining href "open in new tab" with an onClick handler in React

问题描述

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

I have an onClick (React) handler on a table cell that fires properly, however I want to maintain the "Open in a new Tab" feature that having an href on a tag gives you.

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

Trying to combine both on a single element doesn't work as expected, of course:

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

之前我研究过嵌套在表格单元格内的锚标记跨越整个高度，所以每当右键单击单元格的内容，我可以在新标签页中打开，并在表格单元格元素上保留 onClick 处理程序。然而，这种方法存在各种问题，此处概述。

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, outlined here.

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

所以我放弃了上面解释的方法。 /建议的想法？
有没有办法在不必使用锚点/ href的情况下选择在新标签页中打开？

So I ditched that approach for the one explained above. Ideas/suggestions? Is there a way to have the option "Open in a New Tab" without having to use an anchor/href?

推荐答案

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

You have two options here, you can make it open in a new window/tab with JS:

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

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

But a better option is to use a regular link but style it as a table cell:

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

这篇关于维持href“在新标签页中打开”在React中使用onClick处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！