时间戳

首页 > 解决方案 > 单击 ReactJS 的图像时打开新选项卡

reactjs - 单击 ReactJS 的图像时打开新选项卡

问题描述

单击 hover-img 类时，我正在尝试在新选项卡上打开一个新链接（在这种情况下，我刚刚包含了一个虚拟链接：facebook.com）。但我在做这件事时遇到了一些麻烦。以下是我的代码片段，非常感谢您的帮助。

<div className="container">
  {data.map((d)=>(
    <div className="item">
      <img className="background-img" src={d.img} ></img>
      <h3>{d.title}</h3>
      <img 
        className="hover-img" 
        href="www.facebook.com" 
        src="asset/eye.png"
      />
    </div>
  ))}
</div>

标签： reactjshyperlinktabsonclickhref

解决方案

您可以通过单击打开一个新窗口，而不是设置href属性。window.open()

<div className="container">
{data.map((d)=>(
     <div className="item">
       <img className="background-img" src={d.img} ></img>
       <h3>{d.title}</h3>
       <img 
         className="hover-img" 
         src="asset/eye.png" 
         alt="eye" 
         onClick={()=> window.open("https://www.facebook.com", "_blank")} 
       />
     </div>
    ))}
</div>

推荐阅读