為什麼我的 React `onClick` 函數在渲染時觸發？

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中文網其他相關文章！