React onClick 函數在渲染時觸發
在從父元件接收資料的元件中使用React 的onClick 函數時會出現一個常見問題。當 onClick 函數定義不正確時，它可能會在渲染過程中無意觸發，而不是等待使用者點擊事件。
為了理解這個問題，讓我們分析一下提供的範例程式碼：
var taskNodes = this.props.todoTasks.map(function(todo) {
return (
<div>
{todo.task}
<button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
</div>
);
}, this);問題出在 onClick 事件處理程序中。目前，直接呼叫 this.props.removeTaskFunction(todo) ，它會在渲染過程中立即執行該函數。這不是所需的行為，因為 onClick 函數只應在點擊按鈕時呼叫。
要解決此問題，應修改程式碼以傳遞函數參考而不是呼叫它：
<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>使用箭頭函數可確保不會立即呼叫removeTaskFunction，而是等待使用者點擊事件執行。箭頭函數在 ES6 中引入，並在 React 0.13.3 或更高版本中支援。
以上是為什麼我的 React `onClick` 函數在渲染時觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
