Tengo un problema con eso, no encuentro la solución. ¿Cómo puedo ctrl + clic en un enlace para abrirlo en una nueva pestaña?
function handleClick(documentID) { // if ctrl + click window.open(`/document/${documentID}`, "_blank") // else // navigate("/document/" + documentID) } <ListItem onClick={() => handleClick(document.id)}>
he comentado el código para entender bien
Si tiene un enlace, use a
elemento a real con un href. Esto es mejor para la accesibilidad y obtienes la función CTRL + clic de forma gratuita.
Debe pasar el evento para que funcione en lugar de solo ID. De esta manera puedes verificar Ctrl:
function handleClick(event) { const documentID = event.id; if (event.ctrlKey) { window.open(`/document/${documentID}`, "_blank") } else { navigate("/document/" + documentID) } } <ListItem onClick={(event) => handleClick(event)}>
También puede ampliar su función para hacer clic con la rueda del mouse:
function handleClick(event) { event.preventDefault(); const documentID = event.id; if (event.ctrlKey || e.button === 1) { window.open(`/document/${documentID}`, "_blank") } else if (e.type === 'click') { navigate("/document/" + documentID) } } <ListItem onClick={(event) => handleClick(event)} onMouseDown={(event) => handleClick(event)}>
Use la etiqueta de anclaje <a>
(o el componente de reacción <Link>
) si puede, esta es la forma preferida.