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

王小婷

发布于 2019-11-10 15:46:30

53400

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

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