React改变数据【案例】
State传统方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React Demo</title> <!-- 引入React --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <!-- 引入ReactDOM --> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body><div id="test"></div> <script type="text/babel">class Weather extends React.Component{constructor(props) {super(props)// 初始化状态this.state={isHot:false}this.changeWrather = this.changeWrather.bind(this)}render() {// 读取状态const {isHot} = this.statereturn <h1 onClick={this.changeWrather}>今天天气很{isHot?'炎热':'凉爽'}</h1>}changeWrather() {// 获取原来的isHotconst isHot = this.state.isHot// 注意：状态必须通过setState进行更新 状态state不可直接更改this.setState({isHot:!isHot})}}// 渲染ReactDOM.render(<Weather/>,document.getElementById('test'))</script>
</body>
</html>
State简写方式（推荐）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React Demo</title> <!-- 引入React --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <!-- 引入ReactDOM --> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body><div id="test"></div> <script type="text/babel">//创建组件class Weather extends React.Component{// 初始化状态state={isHot:false}render() {// 读取状态const {isHot} = this.statereturn <h1 onClick={this.changeWrather}>今天天气很{isHot?'炎热':'凉爽'}</h1>}// 自定义方法changeWrather=() =>{// 获取原来的isHotconst isHot = this.state.isHot// 注意：状态必须通过setState进行更新 状态state不可直接更改this.setState({isHot:!isHot})}}// 渲染ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
相关文章：
React改变数据【案例】
State传统方式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>React Demo</title> <!--…...
ChatGPT Plus 自动扣费失败，如何续订
ChatGPT Plus 自动扣费失败，如何续订 如果您的 ChatGPT Plus 订阅过期或扣费失败，本教程将指导您如何重新订阅。 本周更新 ChatGPT Plus 是一种每月20美元的订阅服务。扣费会自动进行，如果您的账户余额不足，OpenAI 将在一次扣费…...
Rust： Channel 代码示例
在 Rust 中，通道（Channel）通常使用 std::sync::mpsc（多生产者单消费者）或 tokio::sync::mpsc（在异步编程中，特别是使用 Tokio 运行时）来创建。下面是一个使用 std::sync::mpsc 的简单…...
基于华为atlas的unet分割模型探索
Unet模型使用官方基于kaggle Carvana Image Masking Challenge数据集训练的模型。 模型输入为572*572*3，输出为572*572*2。分割目标分别为，0：背景，1：汽车。 Pytorch的pth模型转化onnx模型： import torchf…...
机器学习--循环神经网络（RNN）1
一、简介 循环神经网络（Recurrent Neural Network）是深度学习领域中一种非常经典的网络结构，在现实生活中有着广泛的应用。以槽填充（slot filling）为例，如下图所示，假设订票系统听到用户说&…...
基于java+springboot+vue实现的学生信息管理系统（文末源码+Lw+ppt）23-54
摘 要 人类现已进入21世纪，科技日新月异，经济、信息等方面都取得了长足的进步，特别是信息网络技术的飞速发展，对政治、经济、军事、文化等方面都产生了很大的影响。 利用计算机网络的便利，开发一套基于java的大学生…...
【漏洞复现】Linksys E2000 position.js 身份验证绕过漏洞(CVE-2024-27497)
0x01 产品简介 Linksys E2000是一款由思科（Cisco）品牌推出的无线路由器，它是一款支持2.4GHz和5GHz双频段的无线路由器，用户可以避开拥挤的2.4GHz频段，独自享受5GHz频段的高速无线生活。 0x02 漏洞概述 Linksys E200…...
小白跟做江科大51单片机之DS1302可调时钟
原理部分 1.DS1302可调时钟介绍 单片机定时器主要占用CPU时间，掉电不能继续运行 图1 2.原理 图2 内部有寄存器，寄存的时候以时分秒寄存，以通信协议实现数据交互，就可以实现对数据进行访问和读写 3.主要寄存器定义 CE芯片使能…...
2024蓝桥杯每日一题（归并排序）
一、第一题：火柴排队 解题思路：归并排序 重点在于想清楚是对哪个数组进行归并排序求逆序对 【Python程序代码】 from math import * n int(input()) a list(map(int,input().split())) b list(map(int,input().split())) na,nb [],[] for …...
生成对抗网络 (GAN)
生成对抗网络（Generative Adversarial Networks，GAN）是由Ian Goodfellow等人在2014年提出的一种深度学习模型。GAN由两部分组成：一个生成器（Generator）和一个判别器（Discriminator）&…...
QGridLayout网格布局和QVBoxLayout垂直布局有着非常大的差别
QGridLayout网格布局：1.把这块控件划分成一个个的 单元格 2.把你的控件填充进入 单元格 3.这些有关限制大小的函数接口统统失效 setMaximumWidth（） setMinimumWidth() setPolicySize()图示：我是用的网格布局，左边放QT…...
HCIA-HarmonyOS设备开发认证V2.0-习题2
目录 习题一习题二坚持就有收获 习题一 # 判断题## 1.PWM占空比指的是低电平时间占周期时间的百分比。(错误)正确(True)错误(False)解题： - PWM占空比指的是高电平时间占周期时间的百分比## 2.UART是通用异步收发传输器，是通用串行数据总线，…...
【npm】前端工程项目配置文件package.json详解
简言 详细介绍了package.json中每个字段的作用。 package.json 本文档将为您介绍 package.json 文件的所有要求。它必须是实际的 JSON，而不仅仅是 JavaScript 对象文字。 如果你要发布你的项目，这是一个特别重要的文件，其中name和version是…...
Python快速入门系列-2（Python的安装与环境设置）
第二章：Python的安装与环境设置 2.1 Python的下载与安装2.1.1 访问Python官网2.1.2 安装Python对于Windows用户对于macOS用户对于Linux用户 2.2 集成开发环境（IDE）的选择与设置2.2.1 PyCharm2.2.2 Visual Studio Code2.2.3 Jupyter Notebook2…...
Linux的环境安装以及项目部署
LInux软件安装 是在发行版是CentOS下安装 通常使用yum安装,可以在rpm上增加了自动解决依赖的功能 传输安装包方式安装JDK与tomcat 安装JDK ●安装包：将.gz文件通过Xftp传输到/opt目录下准备安装 ●解压：进入/opt目录,使用命令tar -zxvf 压缩包名称 (名称…...
ASUS华硕天选2锐龙版笔记本电脑FA506ICB/FA706IC原装出厂Windows11系统，预装OEM系统恢复安装开箱状态
链接：https://pan.baidu.com/s/122iHHEOtNUu4azhVPnxNuA?pwdsqk7 提取码：sqk7 适用型号： FA506IM、FA506IE、FA506IC、FA506IHR FA506IR、FA506IHRB、FA506ICB、FA506IEB FA706IM、FA706IE、FA706IC、FA706IHR FA706IR、FA706IHRB、F…...
登录校验认证
会话技术 会话：用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应。 会话跟踪： 一种维护浏览器状态的方法，服务器需要识别多次请…...
Kubernetes 几大概念的作用
更详细的组件通信流程 Kubernetes 主要由以下几个核心组件组成： 1. etcd 保存了整个集群的状态； 2. API Server 提供了资源操作的唯一入口，并提供认证，授权，访问控制，API 注册和发现等机制； …...
力扣199. 二叉树的右视图（DFS，BFS）
Problem: 199. 二叉树的右视图 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 无论是DFS还是BFS我们都要思考到达二叉树的每一层（或者每一层中的每一个节点）时，我们都该如何按题目要求做出对应得处理!!!在本体中我们主要是&#x…...
[数据集][目标检测]光伏板太阳能版缺陷检测数据集VOC+YOLO格式2400张3类别
数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：2400 标注数量(xml文件个数)：2400 标注数量(txt文件个数)：2400 标注…...
Windows平台B站观影终极指南：BiliBili-UWP第三方客户端完整使用教程
Windows平台B站观影终极指南：BiliBili-UWP第三方客户端完整使用教程 【免费下载链接】BiliBili-UWP BiliBili的UWP客户端，当然，是第三方的了 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBili-UWP 还在为Windows上观看B站视频时…...
用PS2手柄和Arduino UNO做个遥控小车，手把手教你从接线到代码调试（附完整代码）
用PS2手柄和Arduino UNO打造智能遥控小车：从硬件搭建到代码实战 还记得小时候玩遥控车的兴奋感吗？现在，你可以亲手制作一台属于自己的智能遥控小车！这个项目不仅能让你重温童年乐趣，还能学习到Arduino编程、电机控制和…...
OV5640图像拖影？帧率不稳？可能是你的PCLK没配对！附调试心得
OV5640图像拖影与帧率不稳的PCLK调试实战指南 当你在嵌入式项目中集成OV5640摄像头模组时，是否遇到过这样的场景：硬件连接一切正常，驱动程序也能跑通，但实际采集到的图像却出现拖影、撕裂或帧率跳变？作为一款广泛应用…...
5分钟极速拯救：m4s视频转换工具让你的B站缓存重获新生
5分钟极速拯救：m4s视频转换工具让你的B站缓存重获新生 【免费下载链接】m4s-converter 一个跨平台小工具，将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾眼睁睁看着B站收藏的视…...
RobotStudio避坑指南：手把手教你搞定自定义工具坐标系的创建与校准
RobotStudio避坑指南：手把手教你搞定自定义工具坐标系的创建与校准 在工业机器人编程领域，ABB的RobotStudio软件无疑是工程师们最得力的助手之一。但当我们从熟悉的SolidWorks、CATIA等三维设计软件导出模型，准备在RobotStudio中创建自定义工…...
免费在线SVG路径编辑器终极指南：零基础快速上手矢量图形编辑
免费在线SVG路径编辑器终极指南：零基础快速上手矢量图形编辑 【免费下载链接】svg-path-editor Online editor to create and manipulate SVG paths 项目地址: https://gitcode.com/gh_mirrors/sv/svg-path-editor SVG路径编辑器（SVG Path Editor…...
的隐藏玩法：结合协程控制UI渐变、物体平滑移动的完整配置流程)
Unity中MoveTowards()的隐藏玩法：结合协程控制UI渐变、物体平滑移动的完整配置流程
Unity中MoveTowards()的隐藏玩法：结合协程控制UI渐变、物体平滑移动的完整配置流程 在游戏开发中，平滑过渡效果是提升用户体验的关键要素之一。无论是UI元素的动态变化，还是游戏物体的流畅移动，都需要开发者掌握精准的控制技巧。…...
终极指南：3步让旧Mac焕发新生，OpenCore Legacy Patcher完整使用教程
终极指南：3步让旧Mac焕发新生，OpenCore Legacy Patcher完整使用教程 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为旧款Mac无法…...
保姆级教程：用ABB RobotStudio和TCP客户端搞定视觉引导机器人（含避坑点）
工业机器人视觉引导全流程实战：从Socket通信到姿态转换的深度解析 第一次在RobotStudio里配置视觉引导机器人时，我盯着那个报错的Rz参数整整两小时——明明相机数据已经通过Socket传过来了，机器人就是不肯按预期运动。后来才发现，…...
李慕婉-仙逆-造相Z-Turbo AI编程新时代：如何利用大模型提升开发者个人效能
李慕婉-仙逆-造相Z-Turbo AI编程新时代：如何利用大模型提升开发者个人效能 作为一名写了十几年代码的老兵，我经历过从记事本到IDE，再到各种自动化工具的演变。但说实话，最近半年，我工作流里最大的变化，不是…...