Tengo un controlador onClick (Reaccionar) en una celda de la tabla que se activa correctamente, sin embargo, quiero mantener la función "Abrir en una nueva pestaña" que le brinda tener un href en una etiqueta.
Intentar combinar ambos en un solo elemento no funciona como se esperaba, por supuesto:
<td onClick={this.someFunction} href="someLink"> ...some content <td> Anteriormente, busqué tener una etiqueta de anclaje anidada dentro de la celda de la tabla que abarcara la altura completa, de modo que cada vez que se hiciera clic con el botón derecho en el contenido de la celda, podría "Abrir en una pestaña nueva" y aún así mantener un controlador onClick en el elemento de la celda de la tabla . Sin embargo, hay varios problemas con ese enfoque, descritos aquí .
TLDR: la anulación causa otros problemas. Las soluciones tienen varios problemas de compatibilidad.
Así que abandoné ese enfoque por el explicado anteriormente. ¿Ideas/sugerencias? ¿Hay alguna manera de tener la opción "Abrir en una nueva pestaña" sin tener que usar un ancla/href?
Tiene dos opciones aquí, puede hacer que se abra en una nueva ventana/pestaña con JS:
<td onClick={()=> window.open("someLink", "_blank")}>text</td>Pero una mejor opción es usar un enlace normal pero diseñarlo como una celda de tabla:
<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a> Como mencionó alko989, hay una falla de seguridad importante con _blank ( detalles aquí ).
Para evitarlo desde código JS puro:
const openInNewTab = (url) => { const newWindow = window.open(url, '_blank', 'noopener,noreferrer') if (newWindow) newWindow.opener = null } Luego agregue a su onClick
onClick={() => openInNewTab('https://stackoverflow.com')}Para ser aún más breve en reaccionar, puede devolver directamente una función
const onClickUrl = (url) => { return () => openInNewTab(url) } onClick={onClickUrl('https://stackoverflow.com')}Para Typescript + React , así es como se verían:
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) El tercer window.open también puede tomar estos valores opcionales , según sus necesidades.
La respuesta de @gunn es correcta, target="_blank hace que el enlace se abra en una nueva pestaña.
Pero esto puede ser un riesgo de seguridad para tu página; Puedes leer sobre esto aquí . Hay una solución simple para eso: agregar rel="noopener noreferrer" .
<a style={{display: "table-cell"}} href = "someLink" target = "_blank" rel = "noopener noreferrer">text</a>