React/TSX：使用匿名函数的按钮无法Ctrl点击新开标签页求方案

方案一：在onClick事件中直接处理 #

修改你的Button组件，在onClick里判断是否按下Ctrl/Command键，分别处理跳转逻辑：

<Button 
  variant="link" 
  onClick={(evt) => {
    // 替换成你实际要跳转的URL，比如从entity.id生成的地址
    const targetUrl = `/detail/${entity.id}`;
    // 检测Ctrl（Windows/Linux）或Command（Mac）键是否按下
    if (evt.ctrlKey || evt.metaKey) {
      // 新标签页打开链接
      window.open(targetUrl, '_blank');
    } else {
      // 正常点击，执行原有的labelClick逻辑
      labelClick(entity.id);
    }
  }}
>
  { entity.rawDevice.name }
</Button>

方案二：改造labelClick函数支持事件参数 #

如果不想在Button里写过多逻辑，可以把鼠标事件传给labelClick，让函数内部处理：

首先修改Button的onClick绑定：

<Button 
  variant="link" 
  onClick={(evt) => labelClick(evt, entity.id)}
>
  { entity.rawDevice.name }
</Button>

然后更新labelClick函数：

// 给函数添加鼠标事件参数
const labelClick = (evt: React.MouseEvent, entityId: string) => {
  const targetUrl = `/detail/${entityId}`;
  if (evt.ctrlKey || evt.metaKey) {
    evt.preventDefault(); // 阻止可能的默认行为
    window.open(targetUrl, '_blank');
  } else {
    // 这里放你原来的跳转逻辑，比如用react-router的navigate
    navigate(targetUrl);
  }
};

注意事项 #

• 把targetUrl替换成你实际业务中对应的链接地址
• window.open在用户主动触发的事件（比如点击）中不会被浏览器拦截，符合安全规范
• 同时判断evt.ctrlKey和evt.metaKey是为了兼容Windows/Linux的Ctrl键和Mac的Command键

内容的提问来源于stack exchange，提问作者Awesome Luter