react事件中的this指向

在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;