React基础篇（二）之点击button修改属性值

本篇将实现点击一个按钮动态修改数据

上一篇 React 项目的初始化创建

1 index.html 中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>启动页面</title><!--React相关的依赖--><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script><script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script><script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script><!--自定义的jsx--><script type="text/jsx;harmony=true" src="count.jsx"></script>
</head>
<body><!--配制dom一个标签--><div id="content"></div>
</body>
</html>

2 count.jsx 文件中

class CountNumber extends React.Component {//在 JavaScript class 中，每次你定义其子类的构造函数时，都需要调用 super 方法。// 因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。constructor(props) {super(props);//在这里初始化 statethis.state = {numberCount: null};}//外部调用此方法更新 numberCount 的值//例如在 浏览器中调用 root.update()update(){this.setState({numberCount:this.state.numberCount+=2})}// onClick 事件监听函数中调用 this.setState// 以在每次 <button> 被点击的时候通知 React 去重新渲染 当前CountNumber 组件// 组件更新之后 value 的值也改随之改变// 每次在组件中调用 setState 时，React 都会自动更新其子组件。render() {return (<button className="square" onClick={() => this.setState({numberCount: ++this.state.numberCount})}>点击button {this.state.numberCount}</button>);}}//ReactDOM.render(...) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制
//参数一 可以是一个 React 部件，也可以是一段HTML或TEXT文本，在这里使用的是 React 部件
//参数二 是DOM中HTML的节点对象
// 这里使用了 root 变量记录了 ReactDOM 渲染后的组件，可以在浏览器中使用 root 来进行一系列操作
root = ReactDOM.render(<CountNumber/>,//这里的 content 就是刚刚我们定义的div 的 iddocument.getElementById('content')
);

运行程序

npm run dev

或者在浏览器控制台中外部调用方法

React基础篇（二）之点击button修改属性值相关推荐

用Kotlin撸一个图片压缩插件-插件基础篇(二)
简述: 前两天写了篇用Kotlin撸一个图片压缩插件-导学篇,现在迎来了插件基础篇,没错这篇文章就是教你如何一步一步从零开始写一个插件,包括插件项目构建,运行,调试到最后的上线发布整个流程.如果你是插 ...
mysql 基础篇(二) 账号、权限管理
mysql 基础篇(二) 账号.权限管理.备份与还原建立账号密码: Grant all on test.* to "cj"@"localhost" ident ...
vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建
上一篇:vue实战入门基础篇一:从零开始仿门户网站实例-前期准备工作 vue实战入门基础篇二:从零开始仿门户网-2022-2-23 21:00:27 一.目录第一篇:前期准备工作第二篇:开发框架搭 ...
js:点击button后返回值
问题:点击button后返回值只有点击的位置(x,y)信息,如何返回button上的文字信息栗子: 探索角度点击button后的返回值好像是不会包含button上的文本信息的解决方法还不知道应 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
React基础篇（六）React中绑定事件的注意点
本小节讲述在 React 中为 button 设置点击事件的注意点 1 前言在 React 中,事件的名称都是 React 中提供的,因此名称的首字母必须厉害例如 onClick onMouseO ...
WF4.0 基础篇 (二) Activity介绍及WriteLine Activity的使用
从本篇开始,将正式讲解WF4.0,本文主要涉及如下内容:Activity介绍, WF4.0 中工作流的结构,通过WriteLine演示InArgument<T>参数的使用目录 1 ...
字符变量赋值规则_Java的常量、变量、数据类型（基础篇二）
标识符标识符:是指在程序中自己定义的内容,如类名.方法名.变量名等等. 命名规则:是有硬性要求的关键字:是指Java已经定义好的单词,具有特殊含义,比如public.static.class.vo ...
02 MSC类设备-基础篇(二)
上一篇: https://blog.csdn.net/qq_40088639/article/details/110489923 四.Bulk-Only Transport协议传输模型分析BusHo ...

React基础篇（二）之点击button修改属性值

1 index.html 中

2 count.jsx 文件中

React基础篇（二）之点击button修改属性值相关推荐

最新文章

热门文章