React创建一个简单的计数器

2023-11-05

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


React创建一个计数器


一、利用state实现

状态(state)即数据,是组件内部的私有数据,只能在组件内部使用

代码如下(示例):


import React from "react"
import  ReactDOM  from "react-dom"

//React事件处理
class App extends React.Component{
//简化语法

 state = {
     count:0
 }
    render(){
        return(
            <div>
            <h1>计数器:{this.state.count}</h1>
            <button onClick={()=>{
                this.setState({
                    count:this.state.count+ 1
                })
            }}>+1</button>
        </div>
        )
    }
}
//渲染
ReactDOM.render(<App />, document.getElementById('root'))

运行结果如下:
在这里插入图片描述
点击后:
在这里插入图片描述


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React创建一个简单的计数器 的相关文章

随机推荐

  • 使用UltraISO或Rufus制作U盘启动安装优麒麟19.04

    本文教你在Windows操作系统中使用UltraISO 软碟通 或Rufus制作U盘启动盘的方法 以优麒麟Ubuntu Kylin 19 04为例 适用于大多数Linux发行版 包括Ubuntu 18 04等 UltraISO和Rufus任
  • [网络安全自学篇] 三十八.hack the box渗透之BurpSuite和Hydra密码爆破及Python加密Post请求(二)

    这是作者的系列网络安全自学教程 主要是关于安全工具和实践操作的在线笔记 特分享出来与博友们学习 希望您们喜欢 一起进步 前文详细讲解了hack the box在线渗透平台获取邀请码 注册过程 本文将分享Web渗透三道入门题目 它们包括Pyt
  • python3 [爬虫入门实战] 爬虫之使用selenium 爬取百度招聘内容并存mongodb

    爬取的内容为百度招聘页面下的python 杭州地区 所要爬取的内容 一共爬取的是6个字段 1 招聘岗位 2 招聘城市 3 招聘公司 4 招聘薪资 5 招聘日期 6 招聘来源网站 用的是selenium beautifulsoup mongo
  • 餐饮开发项目有智能排菜算法遇到的问题

    说白了 智能排菜就是在用户下了订单之后自动的打印菜品 包含相同的菜品可以一起打出来 以提高饭店效率 个人的想法就是运行一个Timer 事实的检测智能排菜这个功能是否启用 若启用的话则自动打印菜品 Timer的用法就是要继承TimeTask把
  • 【无标题】Altium Designer 版本功能介绍收集

    尊敬的原文作者 感谢分享 如文章转载有冒犯之处 请您联系告知 鄙人将在第一时间删除 原文连接 Altium Designer更新得那么快 到底应该用哪个版本 电子发烧友网 AD19 0 6 显然 软件版本越高 功能越齐全 可能存在一些未知的
  • 使用JAVA实现语音朗读一段文本

    需求要用JAVA去调用windows自带的语音引擎去朗读一段文字 网上资料少得可怜 把百度和bing都翻遍了 总算找到一段代码 而且朗读起来还有感情色彩 win7测试 不过多音字还是暂时没解决 需要做的工作 1 下载jacob 1 17 M
  • 从源码出发浅析 Android TV 的焦点移动原理 (上篇)

    转自 https cloud tencent com developer article 1006289 焦点 焦点 Focus 可以理解为选中态 在Android TV上起很重要的作用 一个视图控件只有在获得焦点的状态下 才能响应按键的C
  • 安装Android Studio出现的问题--SDK Components Setup

    安装的时候遇到这样的问题 查了半天资料才解决 先看一看出错的地方 这一步是安装sdk 选择安装的位置 我选择直接安装到Android目录下 但是出问题了 换了其他的也不可以 再看一看我的文件夹安装目录 问题就出现在这里了 文件夹没弄对 解决
  • flex程序

    lt mx Application xmlns mx http www adobe com 2006 mxml layout absolute gt lt mx Script gt lt mx HTTPService id productS
  • pythonallowpos_Python 爬取 热词并进行分类数据分析-[数据修复]

    日期 2020 02 01 博客期 140 星期六 本博客的代码如若要使用 请在下方评论区留言 之后再用 就是跟我说一声 所有相关跳转 a 简单准备 c 拓扑数据 d 数据修复 本期博客 i App制作 j 安全性改造 今天问了一下老师 好
  • GDB调试:教你简单了解并使用GDB调试程序

    什么是GDB GDB GNU symbolic debugger 是由 GNU 软件系统社区提供的调试工具 当下的 GDB 支持调试多种编程语言编写的程序 包括 C C Go Objective C OpenCL Ada 等 实际场景中 G
  • 备赛电赛学习硬件篇(五):硬件框图、无线通信模块、OLED模块设计

    目录 一 硬件框图绘制 二 无线通信模块 三 OLED模块 一 硬件框图绘制 个人强烈推荐visionon VisionOn是一款可免费使用 亦可免注册使用 不能在线存储 的在线类Visio制图软件 也是一个个人在线白板系统 可
  • 使用 github 仓库搭建 Hexo教程,Hexo配置文件解读,Hexo安装next主题及主题配置,美化

    这是之前写的文章了 重新补一补 把另外写的都和在一起了 出问题方便找 搭建 Hexo 准备 安装 nodejs 安装 git 可以看我之前的博客 好像有写安装方法 安装 hexo cli 中文官网 安装是安装在本地 首先在本地创建一个目录
  • 内存碎片是什么?关于内存碎片的解释

    内存碎片是什么 关于内存碎片 内存碎片通常分为内部碎片和外部碎片 内部碎片 所谓内部碎片指的就是 系统为某项功能分派了一定的内存 但是该功能的实现没有用完所有系统分配的 余下的部分就被成为内存碎片的内部碎片 外部碎片 外部内存指的是有一些连
  • Pytorch 对应版本下载及安装

    PyTorch官网 https pytorch org PyTorch官网浏览旧版本对应安装 https pytorch org get started previous versions PyTorch各个版本下载网址 https dow
  • R语言案例分析:多元数据的基本统计分析

    R语言案例分析 多元数据的基本统计分析 来自 多元统计分析与R语言建模 第四版 数据集下载 我们利用该数据集中的Case1来完成下面的R语言操作 options digits 4 输出结果位数 par mar c 4 4 2 1 0 1 c
  • SPI通信协议和2.4G总结

    SPI SPI Serial Peripheral Interface 协议是由摩托罗拉公司提出的通讯协议 即串行外设接口 是一种高速全双工的通信总线 SPI 总线系统是一种同步串行外设接口 它可以使 MCU 与各种外围设备以串行方式进行通
  • python 绘制 频谱图

    效果图 t np arange 0 time 1 0 sampling rate wavename morl cmorB C where B is the bandwidth and C is the center frequency to
  • linux cpu、内存、IO、网络的测试工具

    一 linux cpu 内存 IO 网络的测试工具 cpu测试工具 1 Super Pi for linux Super PI是利用CPU的浮点运算能力来计算出 圆周率 所以目前普遍被用户用做测试系统稳定性和测试CPU计算完后特定位数圆周率
  • React创建一个简单的计数器

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 React创建一个计数器 一 利用state实现 React创建一个计数器 一 利用state实现 状态 state 即数据 是组件内部的私有数据 只能在组件内部使