当 ctrl + 在 ReactJS 中单击它时，在新选项卡中打开链接？

Question

我有一个问题，我没有找到解决方案。 我如何 ctrl + 单击链接以在新选项卡中打开？

 function handleClick(documentID) {
    // if ctrl + click
    window.open(`/document/${documentID}`, "_blank")
    // else
    // navigate("/document/" + documentID)
  }

 <ListItem onClick={() => handleClick(document.id)}>

我已经评论了代码以便理解

Answer 1

如果您有链接，请使用带有 href 的实际a元素。 这对可访问性更好，您可以免费获得 CTRL + 单击功能。

Answer 2

您需要将事件传递给 function 而只是 ID。 这样你可以检查 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)}>

您还可以扩展您的 function 以单击鼠标滚轮：

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)}>

如果可以，请使用锚<a> （或反应<Link>组件）标签，这是首选方式。