社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
<!DOCTYPE >
<html>
<head></head>
<body>
<div id="box"></div>
<script type="text/javascript" src="../库/react.development.js"></script>
<script type="text/javascript" src="../库/react-dom.development.js"></script>
<script type="text/javascript" src="../库/babel.min.js"></script>
<script type="text/babel">
class Wather extends React.Component{
constructor(props) {
super(props)
this.state={isHot:true}
this.chageWather=this.chageWather.bind(this)
}
render(){
return <h2 onClick={this.chageWather}>今天的天气很{this.state.isHot?'炎热':'凉爽'}</h2>
}
chageWather(){
this.setState({isHot:!this.state.isHot})
}
}
ReactDOM.render(<Wather/>,document.getElementById('box'))
</script>
</body>
</html>
上述案例中绑定了一个点击事件,用来改变isHot的状态,在构造器中通过bind方法重新定义了一个新的chageWather。为什么要写着一行代码?
1、将biad方法注释掉,提示找不到undefind
2、分析一下,render方法中的this是指向Wather实例,new Wather和调用这两步步是React帮我们做的。然后this.chageWather调用chageWather方法,里面的this是undefind,这是因为class中的开启了严格模式,严格模式的this指向undefind。当我们使用bind创建一个新的chageWather时,这个方法是挂在实例上的,且这个方法中的this也指向这个实例。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!