1. state作用
存储数据,对象形式存储。
state: {}
2. state实例
2.1 实例要求
实例:页面生成一个h2标题,并点击标题,切换内容显示
如 : 今天天气很炎热,点击标题,让天气在炎热和凉爽之间切换
2.2 先写出静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<!--1.准备好容器-->
<div id="root"></div>
<!--2.引入js文件-->
<script type="application/javascript" src="../js/react.development.js"></script>
<script type="application/javascript" src="../js/react-dom.development.js"></script>
<script type="application/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//3.1 创建组件
class Weather extends React.Component{
//构造方法
constructor(props) {
super(props);
//初始化 state
this.state = {
isHot:false,wind:"大风"};
console.log("1. constructor: this=",this );
}
//render方法
render(){
console.log("2. render()方法中 this=",this);
return <h2 onClick={
this.changeWeather}>今天天气很{
this.state.isHot ? "炎热" : "凉爽"}</h2>
}
//自定义方法changeWeather
changeWeather(){
console.log("onClick 自定义方法changeWeather: this=",this); //此处this的值为 undefined
}
}
//3.2 渲染组件到页面
ReactDOM.render(<Weather/>, document.getElementById("root"))
</script>
</body>
</html>
输出结果:
3.实现切换功能
3.1 改变state里面的值
希望能通过点击切换“凉爽”和“炎热”
在构造方法中添加一行代码
this.changeWeather = this.changeWeather.bind(this);
分析这行代码:
- 这是一个赋值语句;
- ① this.changeWeather
- 首先this指的是Weather类的实例对象
- this.changeWeather指的是实例对象的方法;