React依赖包我已上传地址如下:https://download.youkuaiyun.com/download/weixin_39162041/86264167
class Wather extends React.Component{
constructor(props){
super(props)
this.state = {isHot:true}
//解决demo中this指向问题
//从原型链上查找到demo方法,并且通过bind改变this的指向为当前类的实例对象,并返回一个新的函数赋值给this.demo解决this指向问题
this.demo = this.demo.bind(this)
}
render(){
return <h1 onClick={this.demo}>今天天气很{this.state.isHot ?'炎热':'凉爽'}</h1>
}
demo(){
//demo放在那里?---demo原型对象上,供实例使用
//由于demo是作为onClick的回调所以不是通过实例调用,是直接调用。
//类中的方法默认开启了局部的严格模式,所以demo中的this为undefined。
console.log('此处修改isHot的值');
}
}
ReactDOM.render(<Wather/>,document.getElementById('test'))
简写类式组件
<script type="text/babel" > /* 此处一定要写babel */
class Wather extends React.Component{
state = {isHot:true}
render(){
return <h1 onClick={this.demo}>今天天气很{this.state.isHot ?'炎热':'凉爽'}</h1>
}
demo = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Wather/>,document.getElementById('test'))
</script>