[问题] 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