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}/>
    </>
);

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

onClick inline function works different from outside function

javascript

reactjs

onclick

inline-functions