反應按鈕 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用戶點擊按鈕