為什麼 onClick 函數會在 React 中的渲染時觸發以及如何防止它？

為什麼 onClick 函數會在 React 中的渲染時觸發以及如何防止它？

傳遞對象列表和刪除函數時到子組件並使用 .map() 函數來顯示對象，我們注意到按鈕的 onClick 函數在渲染期間觸發，這是不應該發生的。

要解決此問題並防止onClick 函數觸發on render:

說明：

在原始程式碼中，直接呼叫onClick 事件處理程序，而不是作為函數的引用傳遞。這意味著該函數在渲染元件時執行，而不是在單擊按鈕時執行。

解決方案：

要解決此問題，請使用類似箭頭函數so:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

ES6 中引入的箭頭函數允許您定義匿名函數，而無需明確聲明function 關鍵字。在這種情況下，在單擊按鈕之前不會呼叫箭頭函數，從而防止 onClick 函數在渲染時觸發。

以上是為什麼 onClick 函數會在 React 中的渲染時觸發以及如何防止它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！