[問題] React問題請教

作者: aoksc (重出江湖)   2017-03-05 16:38:26
https://codepen.io/gaearon/pen/Xjoqwm?editors=0010
請問一下這個範例中
this.handleToggleClick = this.handleToggleClick.bind(this);
為什麼一定要加個bind(this)?
這個this看起來應該指的是class Page
但我還是不太懂為什麼要這樣寫
請問這該往哪方面去查呢?
謝謝
作者: illl (ill!)   2017-03-05 17:03:00
extends React.Component
作者: steven11329 (清新柳橙)   2017-03-05 18:43:00
你可以把那行註解掉就感受得到差異了!
作者: async (非同步)   2017-03-05 18:53:00
我才剛學react,剛好有一段影片有說明為什麼要bind
作者: Hevak (Arthow Eshes)   2017-03-05 19:54:00
因為你把這個function傳給子組件呼叫的時候,子組件呼叫的當下call site是子組件,所以function裡面的this會變成子組件而不是父組件可是因為你希望改的是父組件的狀態(this應該要是父組件),所以你要先把function在父組件給.bind(this),讓他的this固定在父組件(.bind()會回傳一個this被固定成傳給.bind的參數的function)這樣不管你把這個bind過的function傳到哪裡去(例如傳到子組件),他的this都還是當時bind著的那個父組件,就不會指錯this《你所不知道的 JS:範疇與Closures,this與物件原型》這本書對this的概念講得很詳細,推薦讀一下,這樣你就會更清楚為什麼同一個function在不同地方呼叫的時候,this可能是不同個object.bind 主要就是用來解決 this.state、this.setState 的 this 在傳到其他地方之後不會是父組件的問題,所以才要在父組件的 constructor 就先做 .bind(this) 複寫成 this 固定為父組件的 function
作者: iamnodoubt (Have Fun)   2017-03-05 22:15:00
this是在execution context時才會被創立,簡單講就是this會因為function在何處被執行而有所不同延伸閱讀..react解決bind(this)的方法goo.gl/Gj9juQ
作者: st1009 (前端攻城師)   2017-03-07 15:57:00
感謝大大 <3隨然不是原PO,不過受教了<(_ _)>

Links booklink

Contact Us: admin [ a t ] ucptt.com