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 =()=> {&nbsp; &nbsp; console.log('The link was clicked.');}return(&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; <SettingsButton src="./img/leaf.png" alt="" onClick={handleClick}/>&nbsp; &nbsp; </>);