javascript - Maintaining href "open in new tab" with an onClick handler in React - Stack Overflow

admin管理员组

文章数量:1133690

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?

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
• reactjs

Share Improve this question Follow asked Jul 11, 2017 at 23:30 JoseJose 5,17088 gold badges2828 silver badges5050 bronze badges 3

• Possibly a duplicate of this: stackoverflow.com/questions/4907843/… – maxhallinan Commented Jul 11, 2017 at 23:39
• href on a table cell element? – Roko C. Buljan Commented Jul 12, 2017 at 0:28
• @RokoC.Buljan Yeah I know how strange that sounds. I was just showing that as an example. Originally it was just an anchor tag with an href inside of the table cell, but getting that anchor tag to span the full height does not appear to be a viable option without messing with the positioning. – Jose Commented Jul 12, 2017 at 2:53

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 213

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>

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.

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>

React + TypeScript inline util method:

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

Above answers are correct. But simply this worked for me

target={"_blank"}

Here is what I have done. I hope this helps.

link with css gets full width and height.

if statement checks if user is not trying to open new tab by ctrl+click.

You can navigate between links with keyboard as well.

Accessibility:

Alternatively, you may use the title prop or the aria-label prop.

const navigate = function(e){
  if(!e.ctrlKey) {
    e.preventDefault();
    // do your navigation
  }
}

td{
  position: relative;
  padding:10px;
}

a{
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0
}

<table>
    <tr>
        <td onclick="return navigate(event)">
            <a href="yourLink" arial-label="your link text" title="your link text" ></a>
             your link text
        </td>
        <td onclick="return navigate(event)">
            <a href="http://url/stuff"  arial-label="your link text 2" title="your link text 2"></a>
             your link text 2 
        </td>
    </tr>
</table>

本文标签： javascriptMaintaining href quotopen in new tabquot with an onClick handler in ReactStack Overflow