Javascript Onclick=window.open() 函数每次刷新页面时都会打开一个新页面？答案

【问题标题】：Javascript Onclick=window.open() function will open a new page every time I refresh the page?Javascript Onclick=window.open() 函数每次刷新页面时都会打开一个新页面？
【发布时间】：2019-08-06 21:11:30
【问题描述】：

所以我有一个 DIV 元素，当按下它时，我想在不同的窗口中打开一个新选项卡。唯一的问题是，每当刷新页面或按下任何其他 div 元素时，也会启动该函数并在另一个窗口中打开页面。我将在下面包含我的代码，但我不确定为什么会发生这种情况，因为我正在使用 onClick={window.open("https://www.thechinesewriter.com") 就像我说的那样，我只希望在按下 div 时打开一个新选项卡，而不是在任何其他选项卡时点击页面上的项目，甚至刷新页面本身。

import React from "react";
import "./Column1.css";

class Column1 extends React.Component {

    render() {
        return(
            <React.Fragment>
                 <div className="rectImage">
                     <img className="imagePost" src={this.props.image} />   
                 </div>
                 <div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
                     <h2>
                         Source
                     </h2>
                 </div>
                 <div className="downloadBut2">
                     <h2>
                         Repository
                     </h2>
                 </div>
             </React.Fragment> 
         )
     }     
}

export default Column1;

【问题讨论】：

标签： javascript reactjs onclick refresh window.open

【解决方案1】：

您使用一个表达式，该表达式将在每次渲染组件时执行。

<div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">

你可能是想使用一个函数

<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">

【讨论】：

【解决方案2】：

您需要像这样将函数作为回调调用。

<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">

否则每次渲染组件时都会调用它。

【讨论】：