React：五、组件三大核心属性1: state

高冷大猛男

已于 2023-03-14 11:15:19 修改

阅读量48

点赞数

分类专栏： React 文章标签： ui

于 2023-03-13 16:39:11 首次发布

本文链接：https://blog.csdn.net/weixin_60934893/article/details/129488793

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件的状态里面存着数据，数据的改变驱动页面展示

1.点击事件

2.state效果

点击实现冷热切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
     <!-- 准备好一个"容器" -->
     <div id="test"></div>

     <!-- 引入react核心库 -->
     <script type="text/javascript" src="./js/react.development.js"></script>
 
     <!-- 引入react-DOM，用于支持react操作DOM -->
     <script type="text/javascript" src="./js/react-dom.development.js"></script>
 
     <!-- 引入bable，用于将jsx转为js -->
     <script type="text/javascript" src="./js/babel.min.js"></script>

     <script type="text/babel">/* 此处一定要写babel*/
       //1.创建组件
       class Weather extends React.Component{
        constructor(props){
            super(props)
            //初始化状态
            this.state = {isHot:true}
            //解决了changeWeather中this的指向问题。
            this.changeWeather = this.changeWeather.bind(this)

        }
        render(){
          
            //读取状态
            const {isHot} = this.state
            // onClick,C要大写，调用demo()要写{demo形式}
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
        }
        changeWeather(){
            //changeWeather放在哪里？--Weather的原型对象上，供实例使用
            //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接使用的。
            //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

            //获取原来的isHot值
           const isHot = this.state.isHot
           //状态必须通过setState进行更新，且更新是一种合并不是替换
           this.setState({isHot:!isHot})

            
        }
       } 
        //2.渲染组件到页面    下面必须写标签且必须闭合
        ReactDOM.render(<Weather/>,document.getElementById('test'))

        function demo(){
            console.log("标题被点击了");
        }
    </script>

</body>
</html>

下图是简写