this.handleClick = this.handleClick.bind(this)不懂

React 默認只給 render 方法綁定了 this, 其他自定義的方法都需要自己手動綁定 this 的

首先你要知道在一個 React 組件中 this 指的是什么?

• this 是指的當前組件的實例, 如果你在方法中的 this 指向不對的話, 那么當前組件里面的state, props你都無法使用的
• 你可以在 constructor 內(nèi)初始化的時候就給自定義的方法綁定 this 指向當前實例
• 也可以在綁定事件的時候綁定 this 的值, 比如 <div onClick="this.handlerClick.bind(this)"></div>
• 再或者使用箭頭函數(shù)定義方法, 因為箭頭函數(shù)是不綁定 this 的, 所以會向上查找 this 就會找到組件實例進行使用
• 再或者使用 es7的 :: (我沒用過, 就不說了)

總之建議你再學(xué)習(xí)下 bind, call, apply, react的 this 使用等知識

其實這個問題在react的官方文檔那里寫的很清楚。這樣寫的目的是確保handleclick里面的this指向的是當前這個類。那為什么要這樣做呢？那是因為this是在哪調(diào)用就指向哪的，你把那個函數(shù)當做props傳給了子組件，執(zhí)行就不是發(fā)生在當前類了

函數(shù)的this指向是在進入執(zhí)行上下文的時候才確定的，它并不是靜態(tài)綁定的。

var x = 1;
var obj = {
  x: 2,
  getValue: function() {
    return this.x
  }
}
var fn = obj.getValue
fn() // 1
obj.getValue() // 2

但是使用bind,可以返回一個新的函數(shù)，當這個函數(shù)調(diào)用的時候this指向的是傳入值，例如把上一段代碼稍加修改。

var fn = obj.getValue.bind(obj)
fn() // 2

在react中這樣寫，是為了讓子組件在調(diào)用這個函數(shù)的時候this是指向父組件的。

默認React是有this自動綁定的，當然限于使用React.createClass創(chuàng)建的類組件，其他使用ES6類語法并不會綁定this環(huán)境，所以需要手動綁定this環(huán)境；了解跟多React中this問題可以參考React組件中的this，希望對你有所幫助。