案例
<!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也指向这个实例。
9122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
