React小案例: 点击按钮,数字加1

2023-11-09

大家好,我是梅巴哥er,本次案例较为简单,但是有个核心思想,就是要拿到数字这个值,要想到用e.target.value
代码如下:

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 1
        }
    }
    

    handleClick=(e) => {
        console.log(e.target.value)
        this.setState({
            num: e.target.value
        })
    }
    render() {
        const val = this.state.num
        return (
            <div>
                <h3>{ val }</h3>
                <button 
                value={ Number(val) + 1 }
                onClick={ this.handleClick } >点击增加</button>
            </div>
        )
    }
}

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

React小案例: 点击按钮,数字加1 的相关文章

  • Linux 学习笔记1 安装linux详细教程

    系统 CentOS 8 1 1911 x86 64 dvd1 软件 VMware Workstation Pro 16 安装centos VM安装的步骤 1 去BIOS里修改设置开启以常交 f2 f10 2 安装虚拟机软件 vm15 5 演

随机推荐

  • QT(qCompress和qUncompress)与zlib(compress和uncompress)相互调用

    因为QT也是用zlib库的 所以理论上数据是可以直接互通的 但现实是残酷的 通过对qCompress和compress压缩的数据进行打印 可以知道qCompress比compress的数据长四个字节 而这四个字节的内容则未压缩前的数据长度
  • 解决图像目标检测两框重叠问题

    文章目录 1 问题现象 2 解决办法 3 Non Maximum Suppression 原理 3 1 什么是非极大值抑制 3 2 为什么要用非极大值抑制 3 3 如何使用非极大值抑制 3 4 效果 4 参考资料 1 问题现象 使用yolo
  • SpringBoot注解详解:从核心到Web,从数据到测试,一网打尽

    总结的了平时学习springboot常用的一些注解 方便以后开发时可以阅览回忆 springboot的常用注解可以分为以下几类 核心注解 这些注解是springboot的基础 用于启动 配置和管理springboot应用 Web MVC注解
  • 使用SurfaceView加载多张大分辨率图片做帧动画,解决OOM问题

    项目需求 动态背景 需求很简单 只是用帧动画做一个动态的背景而已 但若是70多张图片都是1920 1080 一张485k的话 传统意义上的帧动画就很难实现了 往往加载10张就开始OOM 一般来说 常用的实现动态背景的有效方式有三种 视频 果
  • JVM系列-第12章-垃圾回收器

    垃圾回收器 GC 分类与性能指标 垃圾回收器概述 垃圾收集器没有在规范中进行过多的规定 可以由不同的厂商 不同版本的JVM来实现 由于JDK的版本处于高速迭代过程中 因此Java发展至今已经衍生了众多的GC版本 从不同角度分析垃圾收集器 可
  • Android 腾讯Bugly的应用升级&热更新

    经过去年的九月份至现在 发现自己很久没有写过比较好的文章了 今天就趁着通宵的劲 写一下对腾讯Bugly的应用升级 热更新的理解 希望对新手有所帮助 有兴趣的可以了解下 没兴趣的也可以看完之后吐槽我 Bugly 文档中心 https bugl
  • java 栈的使用

    Stack的基本使用 初始化 Stack stack new Stack 判断是否为空 stack empty 取栈顶值 不出栈 stack peek 进栈 stack push Object 出栈 stack pop 实例 public
  • USB摄像头接树莓派里GPIO是算输入还是输出

    USB摄像头接树莓派里GPIO是算输入还是输出 从程序可以看出来吗
  • Tkinter 组件详解(十一):Text

    Text 文本 组件用于显示和处理多行文本 在 Tkinter 的所有组件中 Text 组件显得异常强大和灵活 适用于多种任务 虽然该组件的主要目的是显示多行文本 但它常常也被用于作为简单的文本编辑器和网页浏览器使用 何时使用 Text 组
  • Linux安装elasticsearch(5.5.2)、head插件以及ik分词器

    Linux里安装elasticsearch 首先需要安装JDK 对于elasticsearch5版本以上的一般使用JDK1 8以上的版本 一 安装JDK 首先检查Linux系统是否安装过jdk 如果安装的是1 8以下的版本 可以删除再安装新
  • Grafana配置https

    目录 1 Yum安装Grafana 2 生成自签名证书 3 Grafana配置https使用自签名证书 4 浏览器访问测试 5 在终端查看连接情况 1 Yum安装Grafana 配置grafana yum源安装grafana最新版本 8 0
  • 51信用卡管家app产品需求文档

    文章通过使用 体验 研究等方式倒推51信用卡管家APP 通过使用axure撰写PRD文档 51信用卡业务很多 文章只撰写部分核心功能点 另外 51信用卡通过和第三方合作 开展了账单导入 办信用卡 借款 投资理财等业务 文中如有相关错误 望指
  • maven3(https://maven.aliyun.com/nexus/content/groups/public)‘ to redirect to a secure protocol (like

    Android Flutter Gradle allowInsecureProtocol 错误 A problem occurred configuring root project example gt Could not resolve
  • Postman :Tests(后置脚本)提取请求Headers的参数值

    代码详解 一 变量 Content Type 存储获取数据 var Content Type pm request headers get Content Type 二 打印提取的请求 Headers 的 Content Type 字段值
  • vue增加数据导出excel(vue-json-excel)

    1 下载安装vue json excel 相当于命令npm install save vue json excel 或者命令npm install vue json excel S 2 创建js文件引入并全局注册标签 import Vue
  • Python __name__与“__main__“是什么意思?

    前言 模块文件的底部 我们经常看见 name 与 main 的代码 如下 if name main pass 而 name main 的结果可能是True 也可能是False 这是为什么呢 name 与 main 分别是什么 name 是当
  • audio接线图解_5.1家庭影院布线之音响如何接线(图文教程)

    实物拍图 内外成色新净 二个光纤 一个同轴 国 际 电压 220V 原装安桥TX SR501功放 马来西亚产 无任何修摩史 各功能完好 功放机用料足 带1组同轴 两组光纤输入 A B两组主音箱切换 耳机输出等等 功放各个频段很平衡 低频不浑
  • Maven 学习笔记十八:Maven仓库(maven仓库介绍)

    Maven仓库 maven仓库介绍 1 何为Maven仓库 maven可以在某个位置统一存储所有maven项目共享的构件 这个统一的位置就是仓库 实际的Maven项目将不会各自存储其依赖文件 它们只需要声明这些依赖的坐标 在需要的时候 例如
  • java8 获取set值_Java8 中有趣酷炫的小技巧

    执行注释 大多数开发人员认为 注释 永远不会在程序中执行 并用于帮助代码理解 但是 它们却 可以被执行 public class Main public static void main String args System out pri
  • React小案例: 点击按钮,数字加1

    大家好 我是梅巴哥er 本次案例较为简单 但是有个核心思想 就是要拿到数字这个值 要想到用e target value 代码如下 import React Component from react export default class