使用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;
