一、問題

例如 平常綁定事件我們一定會這么寫

//創建組件
class Demo extends React.Component{
state = {
    name:'張三'
}
//展示左側輸入框的數據
showData(){
  alert(this.state.name); //此時的this為undefined
}
render(){
  return(
    <div>
      <button onClick={this.showData}>點我</button>&nbsp;
    </div>
  )
}
}
//渲染組件到頁面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

為什么this沒有指向當前類呢，其實很簡單 this 本質上就是指向它的調用者 所以自然指向不會是當前類

例如如下案例

//創建一個Person類
class Person {
//構造器方法
constructor(name,age){
  this.name = name
  this.age = age
}
speak(){
  console.log(this);
}
}
const test = new Person('張三',19)
let speak = test.speak
test.speak() //當前實例
speak() //undefined

然而為什么是undefined不是window呢，因為class里面其實自帶嚴格模式，在babel轉義中也是嚴格模式的，如下圖 在頂端加上了 "use strict";這樣就開啟的嚴格模式，所以就為undefined，好奇的小伙伴也可以試試

function fn(){
  "use strict";
  console.log(this);
}
fn()

?二、解決問題

????????方法 一，用bind改變this指向

//創建組件
class Demo extends React.Component{
state = {
    name:'張三'
}
//展示左側輸入框的數據
showData(){
  alert(this.state.name); 
}
render(){
  return(
    <div>
      <button onClick={this.showData.bind(this)}>點我</button>&nbsp;
    </div>
  )
}
}
//渲染組件到頁面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

? ? ? ? 方法二，用es6的減頭函數this指向上一層?特性

//創建組件
class Demo extends React.Component{
state = {
    name:'張三'
}
//展示左側輸入框的數據
showData = ()=>{
  alert(this.state.name); 
}
render(){
  return(
    <div>
      <button onClick={this.showData}>點我</button>&nbsp;
    </div>
  )
}
}
//渲染組件到頁面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

額外在說說函數傳參把，這里不能像vue一樣，直接??onClick={this.showData('張三')} ，這樣的它綁定的是showData的返回值，從而不能這么寫

解決辦法

onClick={()=>this.showData('張三')} //方法一
onClick={this.showData.bind(this,'張三')} //方法二