当前位置：首页 > news >正文

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

news 来源：原创 2025/8/23 6:19:14

1.React组件状态（state）

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

注意

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

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

利用构造器初始化state，以及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>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指向问题

 this.change = this.changeWeather.bind(this)

3.2render中标签添加点击事件

render () {// 读取状态与添加点击状态 this=>Weather组件实例对象return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>}

3.3setState方法修改state状态中的值

  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整体代码构造函数标准代码模式

<!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常用编码模式非构造函数模式

<!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.statethis.setState((prevState) => ({temperature: 36,weather: '多云',isHot: !dataList.isHot}))}}// 组件渲染ReactDOM.render(<Weather />,document.getElementById('test'))</script>
</body></html>

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

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

编程日记 2025/8/23 6:19:14

第3课：MCP协议接口定义与开发实践

MCP协议接口开发实战：从标准化设计到跨语言SDK落地一、引言：为什么接口标准化是多智能体协作的“刚需” 在多智能体系统中，不同语言开发的智能体、异构服务之间的通信效率往往受制于接口兼容性问题。MCP（Model Context Protoco…...

编程日记 2025/8/21 6:42:45

Perl语言的WebAssembly

Perl语言的WebAssembly：将古老的语言带入新世纪引言在编程语言发展的历史长河中，Perl作为一门早期广泛使用的脚本语言，以其灵活性和丰富的文本处理能力而闻名。然而，随着互联网和Web技术的迅猛发展，许多开发者开始…...

编程日记 2025/8/22 13:03:06

[ISP] ISP 中的 GTM 与 LTM：原理、算法与与 Gamma 校正的对比详解

在现代图像信号处理（ISP）流水线中，图像增强是提升视觉质量的核心手段之一。尤其是在高动态范围（HDR）内容、弱光环境或复杂光照条件下，Tone Mapping（色调映射）技术的引入成为关键。To…...

编程日记 2025/8/23 6:16:04

健身管理小程序|基于java微信开发健身管理小程序的系统设计与实现(源码+数据库+文档)

健身管理小程序目录基于微信开发健身管理小程序设计与实现一、前言二、系统设计三、系统功能设计小程序端： 后台四、数据库设计五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取： 博主介绍：✌️大厂码…...

编程日记 2025/8/22 11:21:56

批量将文本合并成单个文件，支持按文件夹合并文本文档

我们的文件夹中有零零碎碎的多个小的文本文件，这对我们存档记录是非常不方便，不友好的。如果我们能够将多个小的文本文件合并成一个完整的大的文本文件，那不管是在共享还是在存档起来都更加的方便。今天给大家介绍一下如何批量将多个文本文件…...

编程日记 2025/8/19 18:34:35

ROS云课三分钟-差动移动机器人巡逻报告如何撰写-中等报告

评语： 成绩中等（70/100），具体如下： 1. 摘要部分问题描述： 内容空洞：摘要过于简短，仅简要概述了研究内容和实现方法，未突出研究的创新点或重要性。缺乏细节&#xff1…...

编程日记 2025/8/19 8:36:39

forms实现推箱子小游戏

说明: forms实现推箱子小游戏效果图： step0:游戏规则 # 推箱子游戏规则说明## 🎯 游戏目标 - 通过控制角色移动，将所有**棕色箱子(3)**推到**红色目标点(4)**上 - 当所有箱子都变为**绿色(7)**时，即完成当前关卡 - 完成全部关…...

编程日记 2025/8/19 17:55:05

图的存储邻接矩阵 #include <iostream>#include <cstring>using namespace std;const int N 1010;int n, m;int edges[N][N];int main() {memset(edges, -1, sizeof edges);cin >> n >> m; // 读⼊结点个数以及边的个数 for(int i 1; i < m; i)…...

编程日记 2025/8/21 9:34:24

蓝桥杯—数字接龙(dfs+减枝)

一.题目二.思路一看就是迷宫问题的变种，从左上角到达右下角，要解决 1.8个方向的方向向量，用dx，dy数组代表方向向量 2.要按照一个规律的数值串进行搜索0，1，2，k-1，0，1…...

编程日记 2025/8/17 22:10:12

Solidity智能合约漏洞类型与解题思路指南

一、常见漏洞类型与通俗解释 1. 重入攻击(Reentrancy) 🌀 通俗解释：就像你去银行取钱，柜台人员先给你钱，然后再记账。你拿到钱后立即又要求取钱，由于账还没记，柜台又给你一次钱，这样循环下去你就能拿走银行所有的钱。漏洞原理：合约在更新状态前调用外部合约，允许…...

编程日记 2025/8/20 19:29:13

临床不等于医学-《分析模式》漫谈52

DDD领域驱动设计批评文集做强化自测题获得“软件方法建模师”称号《软件方法》各章合集 “Analysis Patterns”的第4章“企业财务观察”有这么一句话： An important point about this model——a reflection of its clinical background 2004（机械…...

编程日记 2025/8/18 0:01:32

鸿蒙应用开发中的 Stack 布局模式

在鸿蒙(HarmonyOS)应用开发中，Stack 布局模式是一种非常灵活的布局方式，类似于其他开发框架中的 StackPanel 或 AbsoluteLayout。它允许子组件按照层级关系进行堆叠，后添加的组件会覆盖在先添加的组件之上。开发者可以通过设置组件的位置、大…...

编程日记 2025/8/20 10:43:30

仿modou库one thread one loop式并发服务器

源码：田某super/moduo 目录 SERVER模块： Buffer模块： Socket模块： Channel模块： Connection模块： Acceptor模块： TimerQueue模块： Poller模块： EventLoop模块&a…...

编程日记 2025/8/21 11:49:30

【AI学习】初步了解Gradio

Gradio 是一个开源的 Python 库，专注于快速构建交互式 Web 界面，特别适用于机器学习模型、数据科学项目或任意 Python 函数的演示与部署。它通过极简的代码实现前后端一体化，无需前端开发经验即可创建功能丰富的应用。以下是 Gradio 的核心特…...

编程日记 2025/8/23 6:15:44

C++11QT复习（十四）

文章目录 Day9 数据结构学习笔记（2025.04.01）一、C基础快速回顾二、STL（标准模板库）三、常见容器及其对应的数据结构四、容器操作演示1. 基本容器使用2. 异构类型容器五、迭代器详解特点示例用户自定义结构体访问成员六、算法库…...

编程日记 2025/8/22 22:02:52

ThreadCache

目录一、Freelist 二、ThreadCache 三、哈希桶映射规则一、Freelist 在之前整体框架介绍的时候，我们曾说过ThreadCache是一个哈希桶的结构。每一个桶都要存同一个大小的对象块（即最小块的内存）。那么我们使用FreeList来…...

编程日记 2025/8/17 1:57:46

c++中同步和异步，阻塞和非阻塞原理以及机制

在C中，同步与异步、阻塞与非阻塞是并发编程中的重要概念，它们描述了程序在执行任务时的行为模式。理解这些概念对于设计高效、响应良好的并发程序至关重要。下面我将详细介绍这些概念的原理和机制。 1. 同步与异步同步（Synchronous&#x…...

编程日记 2025/8/20 22:54:57

Python项目打包指南：PyInstaller与SeleniumWire的兼容性挑战及解决方案

前言前段时间做一个内网开发的需求，要求将selenium程序打包成.exe放在内网的win7上运行，在掘金搜了一圈也没有发现相关文章，因此将过程中踩到的坑记录分享一下。本文涵盖了具体打包操作、不同模块和依赖项的兼容性解决方案，以…...

编程日记 2025/8/18 0:08:47

浅谈微信视频号推荐算法

这次可能会稍微有点干货，但保证不晦涩~ 一、算法推荐的本质：猜你喜欢 vs 社交绑架视频号的推荐系统本质上在做两件事： 预测你的兴趣：通过你的浏览、点赞、评论、分享等行为，分析你的偏好。满足社交需求&…...

编程日记 2025/8/21 12:17:34

selenium 常用方法

selenium 库的常用方法： 方法说明示例代码webdriver.Chrome()初始化 Chrome 浏览器实例。driver webdriver.Chrome()driver.get(url)访问指定的 URL 地址。driver.get("https://example.com")driver.find_element(By, value)查找第一个匹配的元素。elem…...

编程日记 2025/8/22 11:02:12

springboot中使用async实现异步编程

目录 1.说明 2.实现原理 3.示例 4.总结 1.说明 Async 是 Spring 框架提供的一个注解，用于标记方法为异步执行。被标记的方法将在调用时立即返回，而实际的方法执行将在单独的线程中进行。 Async 注解有一个可选属性：指定要使用的特定线程…...

编程日记 2025/8/22 11:12:40

【2024年蓝桥杯Java B组】省赛真题详细解析

【2024年蓝桥杯Java B组】省赛真题距离比赛仅剩5天，大多数省份可能完成3-4题即可拿到省奖，2025年想要拿到省奖，需要高效利用时间，重点突破关键知识点和题型。这里以【2024年蓝桥杯Java B组省赛真题】为例，梳理我们最后…...

编程日记 2025/8/18 0:05:02

SQL：DDL（数据定义语言）和DML（数据操作语言）

目录什么是SQL？ 1. DDL（Data Definition Language，数据定义语言） 2. DML（Data Manipulation Language，数据操作语言） DDL和DML的区别什么是SQL？ SQL（Structured …...

编程日记 2025/8/22 15:14:20

机器学习核心概念、算法分类与应用场景全解析

文章目录一、基础任务与算法分类1. 分类任务（监督学习）2. 回归任务（监督学习）3. 聚类任务（无监督学习） 二、关键流程与技术细节1. 数据预处理2. 特征工程3. 数据集划分与评估三、进阶技术1.深度学习2.强化…...

编程日记 2025/8/20 5:57:18

【leetcode】—416.分割等和子集

✏️ 关于专栏：专栏用于记录 LeetCode 中做题与总结文章目录分割等和子集▐ 题目描述▐ 题目示例▐ 题目提示▐ 思路&代码方法：动态规划分割等和子集 ▐ 题目描述题目链接：分割等和子集给你一个只包含正整数的非空数组 nums …...

编程日记 2025/8/18 0:12:42

jemeter 之mysql驱动问题

问题 java.sql.SQLException: No suitable driver found for jdbc:mysql 解决先把jar放到lib下检查 JMeter 的 Classpath 在 JMeter 中，JDBC 驱动需要手动添加到 Classpath 中。打开 JMeter 安装目录下的 bin/jmeter.properties 文件，找到 user.cla…...

编程日记 2025/8/22 8:36:00

隐私计算的崛起：数据安全的未来守护者

在信息技术（IT）的滚滚浪潮中，一种新兴技术正以惊人速度崭露头角——隐私计算（Privacy-Preserving Computation）。2025 年，随着数据泄露事件频发、全球隐私法规日益严格，以及企业对数据协作需求的…...

编程日记 2025/8/20 17:24:20

Excel计数、求和、统计、计算类函数

目录一、计数函数1. COUNT2. COUNTA3. COUNTBLANK4. COUNTIF5. COUNTIFS 二、求和函数1. SUM2. SUMIF3. SUMIFS4. SUMPRODUCT 三、统计函数1. AVERAGE2. AVERAGEA3. AVERAGEIF 函数4. AVERAGEIFS 函数四、其他常用计算函数1. MAX 与 MIN2. RANK3. MOD4. ROUND5. FLOOR6. INT7…...

编程日记 2025/8/18 0:30:44

解决 Kubernetes 中容器 `CrashLoopBackOff` 问题的实战经验

在 Kubernetes 集群中，容器状态为 CrashLoopBackOff 通常意味着容器启动失败，并且 Kubernetes 正在不断尝试重启它。这种状态表明容器内可能存在严重错误，如应用异常、依赖服务不可用、配置错误等。本文将分享一次实际排障过程，并…...

编程日记 2025/8/21 18:24:23

北师大具身AI的虚拟世界扩展！UNREALZOO：为具身智能打造高逼真度的虚拟世界

作者：Fangwei Zhong, Kui Wu, Churan Wang, Hao Chen, Hai Ci, Zhoujun Li, Yizhou Wang 单位：北京师范大学，北京航空航天大学，北京大学，BIGAI，澳门城市大学，新加坡国立大学论文标题&#xf…...

编程日记 2025/8/20 1:36:44

2025 年浙江保安员职业资格考试高效备考指南

浙江以创新活力著称，保安行业也在不断革新。2025 年考试报考条件常规，报名主要通过浙江省保安服务监管信息系统，方便快捷。理论考试在传统知识基础上，加大对智能安防技术应用的考查，如人脸识别系统、智能监控报警系…...

编程日记 2025/8/19 4:15:51

创意设计：动态彩色数学爱心

设计理念数学之美：使用心形线的数学方程（心形曲线）生成爱心形状。视觉吸引力：通过 Python 的 colorama 库添加颜色渐变效果。动态感：加入简单的动画，让爱心“跳动”。技术魅力：结合模块化编程…...

编程日记 2025/8/22 10:55:02

C++动态内存管理完全指南：从基础到现代最佳实践

一、动态内存基础原理 1.1 内存分配层次结构内存类型生命周期分配方式典型使用场景静态存储区程序整个运行期编译器分配全局变量、静态变量栈内存函数作用域自动分配/释放局部变量堆内存手动控制new/malloc分配动态数据结构 1.2 基本内存操作函数 // C风格 void* malloc(s…...

编程日记 2025/8/17 22:11:33

ebpf: CO-RE, BTF, and Libbpf（一）

本文内容主要来源于Learning eBPF，可阅读原文了解更全面的内容。概述一个ebpf程序可以在一个kernel版本中编译，而在另外一个kernel版本上运行，即便两个kernel版本中有些结构体有变化。而BTF(BPF Type Format) 是能让ebpf有这种强大兼容性…...

编程日记 2025/8/21 22:50:35

Linux 递归查找并删除目录下的文件

在 Linux 中，可以使用 find 命令递归查找并删除目录下的文件 1、示例命令 find /path/to/directory -type f -name "filename_pattern" -exec rm -f {} 2、参数说明 /path/to/directory：要查找的目标目录type f：表示查找文件&am…...

编程日记 2025/8/18 0:54:25

使用人工智能大模型腾讯元宝，如何快速编写活动记录？

今天我们学习使用人工智能大模型腾讯元宝，如何快速编写活动记录？ 手把手学习视频地址https://edu.csdn.net/learn/40402/666457 第一步在腾讯元宝对话框中输入如何协助老师写教研活动记录，通过提问，我们了解了老师写教研活动记录…...

编程日记 2025/8/19 4:15:35

File 类的用法和 InputStream, OutputStream 的用法

1 文件系统的操作创建文件，删除文件，创建目录，重命名文件，判定文件存在... Java中提供file类进行文件系统操作，使用路径进行初始化表示具体的文件（可以存在，也可以不存在）&#xf…...

编程日记 2025/8/18 0:34:21

buuctf--[湖南省赛2019]Findme

目录前沿解题过程分析 p1 P2 p3 p4 p5 前沿其实对于这道题呢，我的想法是不知道怎么判断的，这个题你说他难吧，他用的都是比较基础的东西，说他简单吧，他有太复杂的过程，总体来讲&#xff0…...

编程日记 2025/8/17 23:13:49

【从0到1学MybatisPlus】MybatisPlus入门

Mybatis-Plus 使用场景大家在日常开发中应该能发现，单表的CRUD功能代码重复度很高，也没有什么难度。而这部分代码量往往比较大，开发起来比较费时。因此，目前企业中都会使用一些组件来简化或省略单表的CRUD开发工作。目前在国…...

编程日记 2025/8/17 12:49:48

【S32M244 RTD200P04 LLD篇8】S32M244 PWM ADC LLD demo

【S32M244 RTD200P04 LLD篇8】S32M244 PWM ADC LLD demo 一，文档简介二，PWMTRGMUXPDBADC 2ch 软件配置与实现2.1 软硬件版本平台2.2 Demo CT 模块配置2.2.1 引脚配置2.2.2 时钟配置2.2.3 外设配置 2.3主程序调用情况三， 测试结果一&#xf…...

编程日记 2025/8/20 18:25:20

（蓝桥杯）动态规划蓝桥杯竞赛指南：动态规划解决最少钞票数问题（超详细解析+代码实现）

问题描述近期，黄开的银行新发行了一种面额为 4 的钞票，使得钞票种类增至 5 种：20、10、5、4 和 1 元。银行在发钞时十分“节俭”，当有客户取钱时，需要以最少的钞票数来满足取款金额。问题要求： 对于给定…...

编程日记 2025/8/17 15:55:17

深度：善用人工智能推动高等教育学习、教学与治理的深层变革

在人工智能技术与教育深度融合的当下，高等教育正经历着前所未有的范式转型。从学习方式的革新到教学模式的重构，再到治理体系的升级，人工智能已不再仅仅是辅助工具，而是成为重塑高等教育生态的核心驱动力。这一变革浪潮中，生成式人工智能（Generative AI）作为技术前沿的代…...

编程日记 2025/8/22 22:29:27

python全栈-JavaScript

python全栈-js 文章目录 js基础变量与常量JavaScript引入到HTML文件中JavaScript注释与常见输出方式数据类型typeof 显示数据类型算数运算符之加法运算符运算符之算术运算符运算符之赋值运算符运算符之比较运算符运算符之布尔运算符运算符之位运算符运算符优先级类型转换控制…...

编程日记 2025/8/22 8:17:24

Django信号使用完全指南示例

推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 **引言：****先决条件：****目录：****1. 什么是Django信号？****2：设置你的Django项目****2.1. 安装Django**2.2. 创建一个Django项…...

编程日记 2025/8/17 21:11:58