[問題] React問題請教

看板Ajax作者 (重出江湖)時間7年前 (2017/03/05 16:38), 編輯推噓3(3023)
留言26則, 6人參與, 最新討論串1/1
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

03/05 17:03, , 1F
extends React.Component
03/05 17:03, 1F

03/05 18:43, , 2F
你可以把那行註解掉就感受得到差異了!
03/05 18:43, 2F

03/05 18:53, , 3F
我才剛學react,剛好有一段影片有說明為什麼要bind
03/05 18:53, 3F

03/05 19:54, , 4F
因為你把這個function傳給子組件呼叫的時候,子組件呼叫的
03/05 19:54, 4F

03/05 19:54, , 5F
當下call site是子組件,所以function裡面的this會變成子組
03/05 19:54, 5F

03/05 19:54, , 6F
件而不是父組件
03/05 19:54, 6F

03/05 19:55, , 7F
可是因為你希望改的是父組件的狀態(this應該要是父組件),
03/05 19:55, 7F

03/05 19:56, , 8F
所以你要先把function在父組件給.bind(this),讓他的this
03/05 19:56, 8F

03/05 19:56, , 9F
固定在父組件(.bind()會回傳一個this被固定成傳給.bind的
03/05 19:56, 9F

03/05 19:56, , 10F
參數的function)
03/05 19:56, 10F

03/05 19:56, , 11F
這樣不管你把這個bind過的function傳到哪裡去(例如傳到子
03/05 19:56, 11F

03/05 19:57, , 12F
組件),他的this都還是當時bind著的那個父組件,就不會指
03/05 19:57, 12F

03/05 19:57, , 13F
錯this
03/05 19:57, 13F

03/05 19:58, , 14F
《你所不知道的 JS:範疇與Closures,this與物件原型》這本
03/05 19:58, 14F

03/05 19:58, , 15F
書對this的概念講得很詳細,推薦讀一下,這樣你就會更清楚
03/05 19:58, 15F

03/05 19:59, , 16F
為什麼同一個function在不同地方呼叫的時候,this可能是不
03/05 19:59, 16F

03/05 19:59, , 17F
同個object
03/05 19:59, 17F

03/05 20:01, , 18F
.bind 主要就是用來解決 this.state、this.setState 的 thi
03/05 20:01, 18F

03/05 20:01, , 19F
s 在傳到其他地方之後不會是父組件的問題,所以才要在父組
03/05 20:01, 19F

03/05 20:01, , 20F
件的 constructor 就先做 .bind(this) 複寫成 this 固定為
03/05 20:01, 20F

03/05 20:01, , 21F
父組件的 function
03/05 20:01, 21F

03/05 22:15, , 22F
this是在execution context時才會被創立,簡單講就是
03/05 22:15, 22F

03/05 22:16, , 23F
this會因為function在何處被執行而有所不同
03/05 22:16, 23F

03/05 22:17, , 24F
延伸閱讀..react解決bind(this)的方法
03/05 22:17, 24F

03/05 22:18, , 25F
goo.gl/Gj9juQ
03/05 22:18, 25F

03/07 15:57, , 26F
感謝大大 <3隨然不是原PO,不過受教了<(_ _)>
03/07 15:57, 26F
文章代碼(AID): #1Okyw573 (Ajax)
文章代碼(AID): #1Okyw573 (Ajax)