反应按钮的 onClick 属性：

(1) 和 (2) 有什么区别React?

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

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

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

我找不到任何关于 React 中 onClick 只能接受函数的文档。我也有点困惑 Html 和 JS onClick 属性与 React 有何不同，因此任何文档链接也将受到高度赞赏。

有问题的代码片段：

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

提前致谢！

花括号中的内容就是返回给侦听者的内容。听者期待着function当事件被触发时将被调用。

1. onClick={handleDelete(id)}

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

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

这将起作用，因为您将一个函数分配给侦听器，并且当事件被触发时，它将调用该函数，而该函数又将调用handleDelete(id).

3. onClick={handleDelete}

这也将起作用，因为你正在传递一个参考 to the handleDelete函数传递给监听器，当事件被触发时，该函数将被调用。

（注意：这样做意味着需要重写该组件才能具有data-id该函数可以拾取的属性，因为您不再发送显式id论证handleDelete当你调用它时。）