React-04React组件状态（state），构造器初始化state以及数据读取，添加点击事件并更改state状态值

哟哟耶耶2025-04-09 3:08

1.React组件状态（state）

组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。

注意

  • 组件中render方法中的this为组件实例对象
  • 组件自定义方法中的this指向为undefined解决方法
  • 强制绑定this,通过函数的bind()
  • 赋值+箭头函数（this指向外找）
  • 状态数据：不能直接修改或更新，使用setState修改状态值

2. 构造器初始化state以及数据读取

利用构造器初始化state，以及state中数据的读取，具体例子如下

html 复制代码 
<!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>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1. 创建一个类式组件 extends React.Component 继承react内置的类
        class Weather extends React.Component{
            // 构造器中初始化状态
            constructor(props) {
                // 调用父类的构造器
                super(props);
                this.state = {
                    temperature: 35,
                    weather: '晴'
                }
            }
            render () {
                console.log(this);
                return <h1>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气热</h1>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Weather />,document.getElementById('test'))
    </script>
</body>

</html>

3.state初始化数据 添加点击事件onClick 更新数据

重点

3.1构造器中绑定事件处理函数，bind更改this指向问题
javascript 复制代码 
 this.change = this.changeWeather.bind(this)
3.2render中标签添加点击事件
javascript 复制代码 
render () {
      // 读取状态与添加点击状态 this=>Weather组件实例对象
      return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
       }
3.3setState方法修改state状态中的值
javascript 复制代码 
  changeWeather() {
                // 获取初始的值
                const dataList = this.state              
                // 解决方法：1. 手动绑定this 2. 使用箭头函数
                // this.setState({temperature: 36, weather: '多云', isHot: false})
                // 或者使用箭头函数
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }
3.4整体代码构造函数标准代码模式
html 复制代码 
<!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>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1. 创建一个类式组件 extends React.Component 继承react内置的类
        class Weather extends React.Component{
            // 构造器中初始化状态----调用1次 
            constructor(props) {
                // 调用父类的构造器
                super(props);
                this.state = {
                    temperature: 35,
                    weather: '晴',
                    isHot:true
                }
                // 绑定事件处理函数 changeWeather中的this指向问题
                this.change = this.changeWeather.bind(this)
            }
            
            // 调用---N+1次 N为state更新次数  1为初始化调用1次
            render () {
                // 读取状态与添加点击状态 this=>Weather组件实例对象
                return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
            }

            // 事件处理函数---点几次就调用几次
            changeWeather() {
                // 点击事件 changeWeather--Weather原型对象上，实例使用
                // changeWeather作为onClick事件的回调函数，不是通过实例调用而是直接调用
                // 类中方法默认开启局部严格模式，所以changWeather中的this是undefined 
                // 获取初始的值
                const dataList = this.state
                 //注意：状态state不可直接修改，需要通过setState方法修改  更新是一种合并操作，而不是直接替换
                // 解决方法：1. 手动绑定this 2. 使用箭头函数
                // this.setState({temperature: 36, weather: '多云', isHot: false})
                // 或者使用箭头函数
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }
        }

        // 2.渲染组件到页面
        ReactDOM.render(<Weather />,document.getElementById('test'))
        
    </script>
</body>

</html>
3.5 state常用编码模式非构造函数模式
html 复制代码 
<!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>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1. 创建一个类式组件 extends React.Component 继承react内置的类
        class Weather extends React.Component{
            // 初始化状态
            state= {
                temperature: 35,
                weather: '晴',
                isHot:true
            }
            render () {
                return <h1 onClick={this.changeWeather}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
            }
            // 点击事件-赋值语句+箭头函数  箭头函数向外找this指向
            changeWeather = ()=> {
                const dataList = this.state
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }
        }

        // 组件渲染
        ReactDOM.render(<Weather />,document.getElementById('test'))
        
    </script>
</body>

</html>
相关推荐
Luna-player1 分钟前
在前端中，＜a＞ 标签的 href=“javascript:；“ 这个是什么意思
开发语言·前端·javascript
lionliu05192 分钟前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys15 分钟前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选16 分钟前
GELab-Zero 技术解析：当豆包联手中兴，开源界如何守住端侧 AI 的“最后防线”？
前端·aigc
奇舞精选19 分钟前
Vercel AI SDK：构建现代 Web AI 应用指南
前端·aigc
神仙别闹1 小时前
基于C语言实现B树存储的图书管理系统
c语言·前端·b树
玄魂1 小时前
如何查看、生成 github 开源项目star 图表
前端·开源·echarts
前端一小卒2 小时前
一个看似“送分”的需求为何翻车？——前端状态机实战指南
前端·javascript·面试
syt_10132 小时前
Object.defineProperty和Proxy实现拦截的区别
开发语言·前端·javascript
遝靑2 小时前
Flutter 跨端开发进阶：可复用自定义组件封装与多端适配实战（移动端 + Web + 桌面端）
前端·flutter
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04【AutoGLM部署】本地私有化部署AI手机Agent05Open-AutoGLM Windows 安装部署教程06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10BongoCat - 跨平台键盘猫动画工具