单击 ReactJS 的图像时打开新选项卡答案

【问题标题】：Opening new tab upon clicking image for ReactJS单击 ReactJS 的图像时打开新选项卡
【发布时间】：2021-08-27 11:02:30
【问题描述】：

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

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

【问题讨论】：

标签： reactjs hyperlink tabs onclick href

【解决方案1】：

您可以在点击时打开一个带有window.open() 的新窗口，而不是设置href 属性。

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

【讨论】：