React基础语法05-改变this指向的3种方法

this.state = {
msg:'我是王小婷定义的数据一号'
}

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

<button onClick={this.getData.bind(this)}>第一种获取数据的方法</button>

constructor() {
        super();
        //react定义数据
        this.state = {
            msg:'我是王小婷定义的数据OO'
        }

        //第二种改变this指向的方法
        this.getMsg=this.getMsg.bind(this);
    }

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

<button onClick={this.getMsg}>第二种获取数据的方法</button>

//react定义数据
this.state = {
msg:'我是王小婷定义的数据OO'
}

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

<button onClick={this.getName}>第三种获取数据的方法</button>

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;