• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

104
Views
¿Abrir enlace en una nueva pestaña cuando ctrl + clic en ReactJS?

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

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error