import React,{Component} from 'react';
class Hello extends Component{
constructor(props){
super(props);
//react可以在这里定义数据
this.state={
msg:"我是一个hello组件",
message:"我是message",
username:"ligengxian"
}
//第二种改变this指向的方法，先在开始运行的时候就给他初始化
this.getMessage=this.getMessage.bind(this);
}
//这里可以定义一些方法，跟render平级
run(){
alert("我是一个run方法")
}
getData(){
//用了这个this.getData.bind(this)就可以这样子写
alert(this.state.msg)
}
getMessage(){
alert(this.state.message)
}
//获取state里面的值的三种方法，这个是第三种，用的最多的一种方法
//改变this指向的方法
getName=()=>{
alert(this.state.username)
}
//------------------------------------
//改变state里面的值
setData=()=>{
//改变state的值
this.setState({
msg:"我是一个home组件，这是改变后的值"
})
}
setMessage=(str)=>{
//改变state的值
this.setState({
username:str
})
}
render(){
return (
<div>
<h2>{this.state.msg}</h2>
<br/>
<h2>{this.state.username}</h2>
<button onClick={this.run}>执行方法</button>
<br/>
//获取数据的方法
<button onClick={this.getData.bind(this)}>获取数据第一种执行方法，改变this指向的方法</button>
//第二种获取数据的方法
<button onClick={this.getMessage}>获取数据第二种执行方法，改变this指向的方法</button>
//第三种获取数据的方法
<button onClick={this.getName}>获取数据第三种执行方法，改变this指向的方法</button>
<br/>
<button onClick={this.setData}>改变State的值</button>
<br/>
<button onClick={this.setMessage.bind(this,"张三")}>执行方法传值</button>
//传入多个参数
<button onClick={this.setMessage.bind(this,"张三",'李四')}>执行方法传值</button>
</div>
)
}
}
export default Hello;