react组件状态

一个前提:在react hook出来之前,函数式组件是没有自己的状态的,所以我们统一通过类组件来讲解

1. 初始化状态

• 通过class的实例属性state来初始化
• state的值是一个对象结构,表示一个组件可以有多个数据状态

React.Component{// 初始化状态state = {count: 0}render() {return <Button>计数器</Button>}
}

2. 读取状态

• 通过this.state来获取状态
classCounterextendsReact.Component{

  // 初始化状态state = {count: 0}render() {// 读取状态return <Button>计数器{this.state.count}</Button>}
}

3. 修改状态

• 语法
this.setState({ 要修改的部分数据 })
• setState方法作用
• 修改state中的数据状态
• 更新UI
• 数据驱动视图,也就是只要修改数据状态,那么页面就会自动刷新,无需手动操作dom
• 不要直接修改state中的值,必须通过setState方法进行修改

React.Component{// 定义数据state = {count: 0,abled: false,}// 定义修改数据的方法setCount = () => {this.setState({count: this.state.count+ 1})}// 使用数据 并绑定事件render () {return<Button onClick={this.setCount} disabled={this.state.abled}>{this.state.count}</Button>}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务-gateway鉴权

文章目录 一、前言二、gateway鉴权1、依赖配置2、编写代码3、GlobalFilter详解3.1、GlobalFilter简介3.2、GlobalFilter自定义执行顺序3.2.1、实现Order接口实现自定义执行顺序 一、前言 网关是介于客户端和服务器端之间的中间层&#xff0c;所有的外部请求都会先经过 网关这一…

鲁棒优化入门(6)—Matlab+Yalmip两阶段鲁棒优化通用编程指南(上)

0.引言 上一篇博客介绍了使用Yalmip工具箱求解单阶段鲁棒优化的方法。这篇文章将和大家一起继续研究如何使用Yalmip工具箱求解两阶段鲁棒优化(默认看到这篇博客时已经有一定的基础了&#xff0c;如果没有可以看看我专栏里的其他文章)。关于两阶段鲁棒优化与列与约束生成算法的原…

MySQL访问和配置

目录 1.使用MySQL自带的客户端工具访问 2.使用DOS访问(命令行窗口WinR → cmd) 3.连接工具&#xff08;SQLyog或其它&#xff09; MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 1.使用MySQL自…

DVWA失效的访问控制

失效的访问控制&#xff0c;可以认为是系统对一些功能进行了访问或权限限制&#xff0c;但因为种种原因&#xff0c;限制并没有生效&#xff0c;造成失效的访问控制漏洞,比如越权等 这里以DVWA为例&#xff0c;先访问低难度的命令执行并抓包 删除cookie&#xff0c;并在请求头…

Python之作业(一)

Python之作业&#xff08;一&#xff09; 作业 打印九九乘法表 用户登录验证 用户依次输入用户名和密码&#xff0c;然后提交验证用户不存在、密码错误&#xff0c;都显示用户名或密码错误提示错误3次&#xff0c;则退出程序验证成功则显示登录信息 九九乘法表 代码分析 先…

Git常见问题:git pull 和 git pull --rebase二者区别

git pull 和 git pull --rebase 都是从远程仓库获取最新的更改并将其合并到本地分支。但它们之间的区别在于合并方式。以下是它们之间的主要区别&#xff1a; git pull&#xff1a; 当你执行 git pull 时&#xff0c;Git 会执行以下两个操作&#xff1a; git fetch&#xff…

<图像处理> 可分离滤波器核

可分离滤波器核 空间滤波器核是一个二维矩阵&#xff0c;若它能够表示为两个一维矩阵的乘积时&#xff0c;则表示该滤波器核是可分离的。 例如&#xff0c;一个3x3的核&#xff0c; w [ 1 1 1 1 1 1 1 1 1 ] w\begin{bmatrix} 1 & 1 & 1\\ 1 & 1& 1\\ 1 &am…

vue2和vue3的区别

原文地址&#xff1a;https://www.cnblogs.com/limou956259/p/17195546.html 1、双向数据绑定原理不同 vue2&#xff1a;vue2的双向数据绑定是利用ES5的一个API&#xff1a;Object.definePropert() 对数据进行劫持&#xff0c;结合发布订阅模式的方式来实现的。vue3&#xff…

木棒切割问题

题目很简单&#xff0c;就是我们在写二分的时候&#xff0c;会遇到这样的情况&#xff1a; mid left (right-left)/2; if (nums k)return mid;if (nums>k)left mid;if (nums<k)right mid-1; 若我们debug会发现其可能会一致卡在left mid&#xff0c;例如&#xff08…

框架分析(9)-Hibernate

框架分析&#xff08;9&#xff09;-Hibernate 专栏介绍Hibernate特性对象关系映射&#xff08;ORM&#xff09;数据库连接和事务管理查询语言&#xff08;HQL&#xff09;缓存机制透明的持久化操作对象的延迟加载事务管理 优缺点优点简化数据库操作跨数据库平台高度可定制性缓…

C#通过ModbusTcp协议读写西门子PLC中的浮点数

一、Modbus TCP通信概述 MODBUS/TCP是简单的、中立厂商的用于管理和控制自动化设备的MODBUS系列通讯协议的派生产品&#xff0c;显而易见&#xff0c;它覆盖了使用TCP/IP协议的“Intranet”和“Internet”环境中MODBUS报文的用途。协议的最通用用途是为诸如PLC&#xff0c;I/…

变形记---抽象接口,屎山烂代码如何改造成优质漂亮的代码

在游戏服务器开发过程中,我们经常会在动手码代码之前好好的设计一番,如何设计类,如何设计接口,如何调用,有没有什么隐患,在这些问题考虑评审可以Cover现阶段的需求的情况下再动手。 不过,对于一些初级,甚至中高级开发者,仍然不可避免的进入了一个死胡同,缺少设计,屎…

PCL RANSAC分割提取多个空间圆

目录 一、概述二、代码实现三、结果展示1、原始数据2、提取结果四、测试数据本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 使用PCL分割提取多个空间圆,其核心原理仍然是RANSAC拟合空间圆,这里只是做简单修改…

时序预测 | MATLAB实现EEMD-SSA-LSTM、EEMD-LSTM、SSA-LSTM、LSTM时间序列预测对比

时序预测 | MATLAB实现EEMD-SSA-LSTM、EEMD-LSTM、SSA-LSTM、LSTM时间序列预测对比 目录 时序预测 | MATLAB实现EEMD-SSA-LSTM、EEMD-LSTM、SSA-LSTM、LSTM时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 时序预测 | MATLAB实现EEMD-SSA-LSTM、E…

uniapp制作——交友盲盒

在小程序端可以有很多好玩的小玩意&#xff0c;目前网上比较有趣的就是有一个交友盲盒&#xff0c;能抽出和找出对象的一个有趣的小程序&#xff0c;所以今天给大家带来用uniapp搭建的交友盲盒&#xff0c;大家再根据自己的情况去搭建自己的后端和数据库来完成自己的一个小项目…

FPGA实现电机转速PID控制

通过纯RTL实现电机转速PID控制&#xff0c;包括电机编码器值读取&#xff0c;电机速度、正反转控制&#xff0c;PID算法&#xff0c;卡尔曼滤波&#xff0c;最终实现对电机速度进行控制&#xff0c;使其能够渐近设定的编码器目标值。 一、设计思路 前面通过SOPC之NIOS Ⅱ实现电…

算法笔记:点四叉树

点四叉树是一种用于主要是针对空间点存储与索引的树形数据结构在点四叉树中&#xff0c;空间被分割成四个矩形&#xff0c;四个不同的多边形对应于SW、NW、SE、NE四个象限 1 基本操作 1.1 初始化 创建一个根节点&#xff0c;该节点代表整个二维空间区域 1.2 插入点 当一个新…

oracle 自定义存储过程(非常简单明了)

语法说明 CREATE OR REPLACE PROCEDURE 存储过程名字 ( 参数1 IN %TYPE, 参数2 IN %TYPE, 参数3 OUT %TYPE) IS 变量1 %TYPE; 变量2 %TYPE; BEGIN存储过程执行语句块 END 存储过程名字;举例说明 1.举一个简单的例子 定义存储过程 easyProcedure 入参为 两个数 出参为 他们的…

自己公司开发的ERP系统,怎么对接京东,淘宝等这些电商平台?

得益于互联网基建的成熟及快速发展的电子商贸经济&#xff0c;我国线上零售市场快速增长&#xff0c;2022年全国线上零售额达到13.79万亿元&#xff0c;占社会消费品零售总额的比重为27.2%&#xff0c;也就是说每卖出三件零售商品&#xff0c;就有一件是从线上销售。中大型零售…

P1116 车厢重组(冒泡排序)

题目描述 在一个旧式的火车站旁边有一座桥&#xff0c;其桥面可以绕河中心的桥墩水平旋转。一个车站的职工发现桥的长度最多能容纳两节车厢&#xff0c;如果将桥旋转 180 180 180 度&#xff0c;则可以把相邻两节车厢的位置交换&#xff0c;用这种方法可以重新排列车厢的顺序…