onClick function 在渲染時被調用——我怎樣才能阻止這種情況的發生？

Question

React 組件不應在每次渲染時調用 function。 為什么在我的情況下它會在渲染時被調用？

前任。）

const onClick = () => {
    console.log('hi');
}

<button onClick={onClick}>CLICK</button>

我想知道當有上面這樣的代碼時，onClick function 在哪里被調用。

Answer 1

就像 HTML 一樣，React 可以根據用戶事件執行操作。 HTML 事件可以是瀏覽器執行的操作，也可以是用戶執行的操作。 例如，單擊按鈕、將鼠標懸停在圖像上等。

onClick只是眾多事件處理程序之一，並在用戶單擊相關元素時執行。

語法 b/w HTML 和 JSX 的區別：react/JSX 中的onClick={shoot}和 HTML 中的onClick="shoot()" 。

1. 我建議閱讀有關Javascript Events的內容。
2. 您似乎有興趣了解 react 事件的內部工作，因此您可以參考 react 網站上的SyntheticEvent文檔。

Answer 2

我在開始使用 React 時遇到了同樣的問題，解決方法是在 onClick 之前添加一個箭頭 function：

    const onClick = () => {
    console.log('hi');
}

    return(
    <button onClick={() => onClick()}>CLICK</button>
)