React基礎語法05-改變this指向的3種方法

  • 2019 年 11 月 11 日
  • 筆記

使用this指向當前組件的三種方法：分別是在模板里，在構造函數里，在構造函數里改變，推薦第三種，箭頭函數。

1：在模板裡面：改變this指向的方法

定義的數據

this.state = {  msg:'我是王小婷定義的數據一號'  }

方法

getData(){  alert(this.state.msg);  }

模板

<button onClick={this.getData.bind(this)}>第一種獲取數據的方法</button>

2：在構造函數裡面： 指定

定義數據，構造函數

constructor() {          super();          //react定義數據          this.state = {              msg:'我是王小婷定義的數據OO'          }            //第二種改變this指向的方法          this.getMsg=this.getMsg.bind(this);      }

方法：

getMsg(){  alert(this.state.msg);  }

模板

<button onClick={this.getMsg}>第二種獲取數據的方法</button>

3:在方法裡面：使用箭頭函數指向（推薦）

定義數據

//react定義數據  this.state = {  msg:'我是王小婷定義的數據OO'  }

方法：

getName=()=>{  alert(this.state.msg);  }

模板

<button onClick={this.getName}>第三種獲取數據的方法</button>

參考程式碼：Home.js

import React, { Component } from 'react';  import photo from '../asset/images/photo.jpg';  import '../asset/css/index.css'  class Home extends Component {      constructor() {          super();          //react定義數據          this.state = {              msg:'我是王小婷定義的數據OO'          }            //第二種改變this指向的方法--在構造函數裡面： 指定          this.getMsg=this.getMsg.bind(this);      }        run(){          alert('我是王小婷定義的方法')      }        getData(){          alert(this.state.msg);      }        getMsg(){          alert(this.state.msg);      }       //第三種改變this指向的方法--在方法裡面：使用箭頭函數指向      getName=()=>{          alert(this.state.msg);      }      render() {            return (              <div>                  <button onClick={this.run}>點擊按鈕</button>                    {/* 第一種改變this指向的方法--在模板裡面：改變this指向 */}                    <button onClick={this.getData.bind(this)}>第一種獲取數據的方法</button>                  <button onClick={this.getMsg}>第二種獲取數據的方法</button>                  <button onClick={this.getName}>第三種獲取數據的方法</button>              </div>          )      }  }  export default Home;

Tags:

VirMach 便宜 VPS