Maintaining href "open in new tab" with an onClick handler in React
JavascriptReactjsJavascript Problem Overview
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>
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: Overriding causes other problems. Solutions have various compatibility issues.
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?
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
Most Secure Solution, JS only
As mentioned by alko989, there is a major security flaw with _blank
(details here).
To avoid it from pure JS code:
const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
if (newWindow) newWindow.opener = null
}
Then add to your onClick
onClick={() => openInNewTab('https://stackoverflow.com')}
To be even terser in react, you can directly return a function
const onClickUrl = (url) => {
return () => openInNewTab(url)
}
onClick={onClickUrl('https://stackoverflow.com')}
For Typescript + React, here is what these would look like:
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)
The third window.open
param can also take these optional values, based on your needs.
Solution 3 - Javascript
The answer from @gunn is correct, target="_blank
makes the link open in a new tab.
But this can be a security risk for you page; you can read about it here. There is a simple solution for that: adding rel="noopener noreferrer"
.
<a style={{display: "table-cell"}} href = "someLink" target = "_blank"
rel = "noopener noreferrer">text</a>
Solution 4 - Javascript
React + TypeScript inline util method:
const navigateToExternalUrl = (url: string, shouldOpenNewTab: boolean = true) =>
shouldOpenNewTab ? window.open(url, "_blank") : window.location.href = url;
Solution 5 - Javascript
Above answers are correct. But simply this worked for me
target={"_blank"}