看板 Ajax 關於我們 聯絡資訊
https://codepen.io/gaearon/pen/Xjoqwm?editors=0010 請問一下這個範例中 this.handleToggleClick = this.handleToggleClick.bind(this); 為什麼一定要加個bind(this)? 這個this看起來應該指的是class Page 但我還是不太懂為什麼要這樣寫 請問這該往哪方面去查呢? 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.233.159.254 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1488703109.A.1C3.html
illl: extends React.Component 03/05 17:03
steven11329: 你可以把那行註解掉就感受得到差異了! 03/05 18:43
async: 我才剛學react,剛好有一段影片有說明為什麼要bind 03/05 18:53
Hevak: 因為你把這個function傳給子組件呼叫的時候,子組件呼叫的 03/05 19:54
Hevak: 當下call site是子組件,所以function裡面的this會變成子組 03/05 19:54
Hevak: 件而不是父組件 03/05 19:54
Hevak: 可是因為你希望改的是父組件的狀態(this應該要是父組件), 03/05 19:55
Hevak: 所以你要先把function在父組件給.bind(this),讓他的this 03/05 19:56
Hevak: 固定在父組件(.bind()會回傳一個this被固定成傳給.bind的 03/05 19:56
Hevak: 參數的function) 03/05 19:56
Hevak: 這樣不管你把這個bind過的function傳到哪裡去(例如傳到子 03/05 19:56
Hevak: 組件),他的this都還是當時bind著的那個父組件,就不會指 03/05 19:57
Hevak: 錯this 03/05 19:57
Hevak: 《你所不知道的 JS:範疇與Closures,this與物件原型》這本 03/05 19:58
Hevak: 書對this的概念講得很詳細,推薦讀一下,這樣你就會更清楚 03/05 19:58
Hevak: 為什麼同一個function在不同地方呼叫的時候,this可能是不 03/05 19:59
Hevak: 同個object 03/05 19:59
Hevak: .bind 主要就是用來解決 this.state、this.setState 的 thi 03/05 20:01
Hevak: s 在傳到其他地方之後不會是父組件的問題,所以才要在父組 03/05 20:01
Hevak: 件的 constructor 就先做 .bind(this) 複寫成 this 固定為 03/05 20:01
Hevak: 父組件的 function 03/05 20:01
iamnodoubt: this是在execution context時才會被創立,簡單講就是 03/05 22:15
iamnodoubt: this會因為function在何處被執行而有所不同 03/05 22:16
iamnodoubt: 延伸閱讀..react解決bind(this)的方法 03/05 22:17
iamnodoubt: goo.gl/Gj9juQ 03/05 22:18
st1009: 感謝大大 <3隨然不是原PO,不過受教了<(_ _)> 03/07 15:57