onClick内联函数的工作方式与外部函数不同

Question

我有一个新手问题，可能很容易解释。我有一个添加了onClick属性的图像。如果我调用一个内联函数来记录一些内容，它会按预期工作。每当单击图像时，它都会登录到控制台。然而，每当我在那里调用一个外部函数时，它都会每秒被点击一次，这是因为我每秒都有数据进入，更新代码的一部分。

我的问题是，为什么内联函数有效，而另一种方法无效？我在这里错过了什么？

内联版本。。。

return(
<>
<SettingsButton src="./img/leaf.png" alt="" onClick={() => { console.log("button clicked");}}/>
</>
);

而另一种方式则无法按预期工作。。。

function handleClick() {
console.log('The link was clicked.');
}
return(
<>
<SettingsButton src="./img/leaf.png" alt="" onClick={handleClick()}/>
</>
);

Answer 1

在您的示例中，通过将组件写入handleClick()，您可以在加载组件后立即调用函数，因此浏览器不会等待您按原样单击。

handleClick =()=> {
console.log('The link was clicked.');
}
return(
<>
<SettingsButton src="./img/leaf.png" alt="" onClick={handleClick}/>
</>
);