1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>state.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
//1.创建类式组件
class Wethear extends React.Component{
constructor(props) {
console.log('constructor')
super(props);
this.state = {
isHot:false,
wind:'微风'
}
// 绑定this
this.changeWeather = this.changeWeather.bind(this);
}
//render放在类型原型对象上,供实例使用。
render(){
console.log('render中的this',this)
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'寒冷'},{this.state.wind}</h1>
}
changeWeather(){
//获取原来的isHot
const isHot = this.state.isHot;
//状态必须是通过setState来进行更新,且更细是一种合并,不是替换
this.setState({
isHot:!isHot
})
}
}
//2.渲染组件到页面
ReactDOM.render(<Wethear/>,document.getElementById('root'))
</script>
</body>
</html>
2.简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_state简写方式.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
class Wethear extends React.Component{
//初始化状态
state = {
isHot:false,
wind:'微风'
}
render(){
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'寒冷'},{this.state.wind}</h1>
}
//自定义方法-要用赋值语句的形式+箭头函数
changeWeather= ()=>{
const isHot = this.state.isHot
this.setState({
isHot:!isHot
})
}
}
ReactDOM.render(<Wethear/>,document.getElementById('root'))
</script>
</body>
</html>
3.效果