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