為什么 React 事件處理程序在接收 arguments 時表現不同？

Question

使用以下代碼，每次單擊按鈕時，都會按預期將“我被單擊”輸出到控制台。

function handleClick() {
    console.log("I was clicked")
}

function App() {
    return (
        <div>
            <img src="https://www.fillmurray.com/200/100"/>
            <br />
            <br />
            <button onClick={handleClick}>Click me</button>
        </div>
    )
}

但是，如果我更改 handleClick 以獲取參數，則 output 會在頁面加載時顯示，並且任何額外的點擊都不會產生額外的 output。

function handleClick(test) {
    console.log(test + "I was clicked")
}

function App() {
    return (
        <div>
            <img src="https://www.fillmurray.com/200/100"/>
            <br />
            <br />
            <button onClick={handleClick("hello: ")}>Click me</button>
        </div>
    )
}

為什么在這里包含參數的簡單行為會改變行為？ 我懷疑它與事件處理程序沒有在第二種情況下傳遞事件 object ，而在第一種情況下自動傳遞，但我不確定事件 object 的哪些屬性會導致這種行為。

Answer 1

如果在 function 之后使用 ()； 這意味着 function 執行。 要使用此語法分配值，您可以輕松地使用

onPress={handleClick.bind(this, ...args)}

使用這種語法，我們將當前 scope 的 this 綁定到 function 並且我們在分配參數時沒有執行它。 分配參數和立即調用 function 的方式是

handleClick.call(this, ...args)