反应按钮 onClick 属性：

Question

React中的 (1) 和 (2) 有什么区别？

onClick={()=>handleDelete(id)} -------(1)

onClick={handleDelete(id)} ----------(2)

为什么（2）会导致无限循环而（1）工作得很好？

我在反应中找不到任何关于 onClick 的文档，只能接受功能。 我也有点困惑 Html 和 JS onClick 属性与反应有何不同所以任何文档链接也将受到高度赞赏。

有问题的代码片段：

<button
    className="btn btn--danger"
    onClick={()=>handleDelete(id)}
>
    Delete
</button>

提前致谢！

Answer 1

花括号中的内容是返回给听众的内容。 侦听器期望在触发事件时调用function 。

1. onClick={handleDelete(id)}

这不起作用，因为您正在立即调用handleDelete并将调用 function 的结果分配给侦听器。 function 可能返回显式值或undefined （注意：显式值可能是一个新的function （闭包），可以分配给侦听器 - 但在这种情况下，我怀疑这种情况正在发生）。

2. onClick={() => handleDelete(id)}

这将起作用，因为您将 function 分配给侦听器，并且在触发事件时，它将调用 function ，而后者又将调用handleDelete(id) 。

3. onClick={handleDelete}

这也将起作用，因为您将对handleDelete function 的引用传递给侦听器，并且在触发事件时将调用 function。

（注意：这样做意味着需要重写组件以具有data-id属性，function 可以获取该属性，因为您在调用它时不再向handleDelete发送显式id参数。）

Answer 2

在解释差异之前，您在第二个中的大括号不匹配

The second one is Called invoked function that means when the component mounts the function runs without clicking the button, it will invoke and runs it, and does not wait and will run immediately,and for the other one is callback function it will run when the用户点击按钮