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;