在react中繫結事件處理函式的this指向一共有三種方法，本次主要總結這三種方式。

專案建立

關於專案的建立方法，在之前的文章中有記錄，這裡不再贅述，專案建立成功後，按照之前的目錄結構對生成的專案進行調整，新建一個Home.js元件，並在App.js中引入該元件。

Home.js

import React from 'react';
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:'我是Home元件'
        }
    }

    render(){
        return(
            
 
<div>
                <h3>{this.state.msg}</h3>
            </div>
        )
    }
}
export default Home;

App.js

import React, { Component } from 'react';
import './assets/css/App.css';
import  Home from './components/Home'


class App extends Component {
  render() {
    return (
      
 
<div className="App">
          這裡是根元件
          <br/>
          <Home />
      </div>
    );
  }
}

export default App;

基本事件方法

首先以點選事件為例，需要有觸發事件的點選按鈕，需要有事件執行方法，具體寫法如下：

當我們點選按鈕的時候就會執行上面的run方法，需要注意的是，run方法結束後是不帶符號的。

事件中獲取資料

按照上面的寫法，當我們需要在方法中使用資料的時候，最先想到的就是下面這種寫法了：

可結果並不是我們預期的順利，此時因為this的指向出現問題而報錯了，因為我們預期的this是當前元件，而不是當前執行的方法。

所以，此時需要改變this的指向，常見有下面三種方法：

方法一：通過bind來指明當前方法中的this指向當前Home.js元件

方法二：在建構函式constructor中改變this指向。

方法三：使用箭頭函式改變this指向。

事件中改變資料

 在獲取資料的時候需要處理this指向，自然在改變資料的時候也需要處理this指向問題，所以改變資料也對應有三種方法。

Home.js

import React from 'react';
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:'我是Home元件的資料一',
            text:'我是Home元件的資料二',
            info:'我是Home元件的資料三',
        }
        this.change = this.change.bind(this);
    }
    run(){
        this.setState({msg:'我是方法一'})
    }
    change(){
        this.setState({text:'我是方法二'})
    }
    updata=()=>{
        this.setState({info:'我是方法三'})
    }
    render(){
        return(
            <div>
                <h3>{this.state.msg}</h3>
                <h3>{this.state.text}</h3>
                <h3>{this.state.info}</h3>
                <button onClick={this.run.bind(this)}>改變資料1</button>
                <button onClick={this.change}>改變資料2</button>
                <button onClick={this.updata}>改變資料3</button>
            </div>
        )
    }
}
export default Home;