(三)React事件方法

import React, { Component } from 'react';

class Demo2 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:'我是一个Demo组件',
            msg1:'我是一个Demo组件',
            username:'张三'
        }

        //第二种改变this指向的方法
        this.getMsg = this.getMsg.bind(this);
    }
    //和reder同级定义方法
    run(){
        alert('我是一个run方法');
    }

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

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

    //第三种改变指向方法,执行方法改变this指向
    getName=()=>{
        alert(this.state.username);
    }

    //改变数值
    setDate=()=>{
        //改变state值
        this.setState({
            msg:'改变里面的值'
        });
    }

    render(){
        
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.run}>执行方法</button>
                <br />
                {/*获取数据方式*/}
                <button onClick={this.getData.bind(this)}>获取数据--第一种方法,改变this指向</button>
                <button onClick={this.getMsg}>获取数据--第二种方法,改变this指向</button>
                <button onClick={this.getName}>获取数据--第三种方法,改变this指向</button>
                <button onClick={this.setDate}>改变数值</button>
            </div>
        );
    }
}

export default Demo2;