將事件參數和事件對象傳遞給ReactJS中沒有箭頭函數的事件處理函數

因此，我一直在尋找將參數對象和事件對象傳遞給事件處理函數的正確方法。有最佳做法嗎？將事件參數和事件對象傳遞給ReactJS中沒有箭頭函數的事件處理函數

我發現的唯一方法是使用箭頭函數並傳遞事件對象和參數，就像這樣。

<Button onClick={(e) => this.updateProgress(e, 1)} >Increase</Button>

由於在某些情況下可能存在多個回調綁定，因此官方文檔不鼓勵。

https://facebook.github.io/react/docs/handling-events.html

有沒有辦法通過沿兩個事件對象和事件參數對象的事件處理程序，而無需使用箭頭功能？

來源

2017-03-05 Molotch

是的，你可以調用一個函數調用另一個函數的參數。這將更加混亂 –

@ArshabhAgarwal我看到一個博客文章，看起來很混亂。 – Molotch

是的！只要做你現在正在做的事情。下面的答案是非常正確的。 –

我從來沒有積極勸阻過。你提到的那部分文檔是你在不是傳遞額外的參數。

當您的是傳遞參數時，您提供的方式正是完成此操作的方式。

編輯唯一的例外是，如果爭論在某種程度上常數（我想不出的情況時，他們會是這樣，只是標記）。

這種模式（您提供的模式）對於循環內的處理程序非常重要，其中每個項目需要調用回調/處理程序，但是在id或鍵或索引上進行轉發。

來源

2017-03-05 12:50:03 Chris

謝謝，一般認爲它是氣餒，但如果沒有更好的方法來傳遞參數，我想這是一條路。 – Molotch

另一種方法是使用.bind，但不建議這樣做，因爲在每個render()調用中都會創建一個新函數。

updateProgress(arg, event) { 
    console.log(arg, event); // Prints: 1 Proxy {dispatchConfig: Object ... 
} 

render() { 
    return 
    ... 
    <Button onClick={this.updateProgress.bind(this, 1)}>Increase</Button> 
}

來源

2017-03-05 17:23:31

這不是更糟？它綁定每個按鈕點擊，而不僅僅是每個渲染？或者我誤解了？ – Molotch

這是正確的，它綁定在每個渲染上。每個按鈕點擊調用綁定函數updateProgress –

這基本上是一樣的東西;一個箭頭函數也會在每個'render（）'調用上創建一個新函數。箭頭函數的主要優點是可以說它有更清晰的語法。 –

將事件參數和事件對象傳遞給ReactJS中沒有箭頭函數的事件處理函數

回答

相關問題