Menu
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?
505
To open a link in a new tab in React, use the <a> element and set its target prop to _blank , e.g. <a href="https://google.com" target="_blank" rel="noopener noreferrer"></a> . The _blank value means that the resource is loaded into a new tab. Copied!
To set an onClick listener on a link in React: Set the onClick prop on the link. The function you pass to the prop will get called every time the link is clicked.
Normally, we create a link in React using the <Link> component. If we click on the above link, it will open an About page in the same tab. To open the link in a new tab, we can use the <a> element by passing a target attribute with a value _blank.
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.
React Event Handlers. In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app. Click on any of the examples below to see code snippets and common uses: Call a Function After Clicking a Button. Call an Inline Function in an onClick Event Handler.
import { useNavigate } from "react-router-dom"; ... ... const navigate = useNavigate (); ... ... <Button onClick= { ()=> {navigate ('/someURL')}}>Open URL</Button> you can use window.open () method instead of using navigate () to open the URL in the new tab. Pass '_blank' as a second argument in the function for opening it in new tab. Example:
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> 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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
