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

    </>

);