import React from 'react'

class Home extends React.Component{

    constructor(props){

        super(props)

        this.state = {

            msg: 'Home组件中的数据'

        }

        this.getMessage = this.getMessage.bind(this) // 在构造器中定义this的指向

    }

    run(){

        alert('这个是run方法')

    }

    getState() {

        alert(this.state.msg)

    }

    getMessage() {

        alert(this.state.msg)

    }

    getThisData = ()=>{ // 由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值，

        alert(this.state.msg)

    }

    setStateData=()=>{

        this.setState({  // 使用setState来改变的state的值

            msg: '改变Msg的值'

        })

    }

    diyStateData =(msg)=>{ // 如果需要传参数到函数中，要先在bind中定义this，然后在后面传入形参

        this.setState({

            msg: msg

        })

    }

    render() {

        return  <div>

                    <button onClick={this.run}>执行自定义函数</button>

                    <button onClick={this.getState.bind(this)}>改变this的方式一</button>

                    <button onClick={this.getMessage}>改变this的方式二</button>

                    <button onClick={this.getThisData}>改变this的方式三</button>

                    <button onClick={this.setStateData}>改变state的值</button>

                    <button onClick={this.diyStateData.bind(this,'66666')}>改变state的值1111</button>

                </div>

    }

}

export default Home