React组件三大属性之state
React组件三大属性之state
组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
理解
1) state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
编码操作
1) 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
2) 读取某个状态值
this.state.statePropertyName
3) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
/*
需求: 自定义组件, 功能说明如下
1. 显示h2标题, 初始文本为: 你喜欢我
2. 点击标题更新为: 我喜欢你
*/
//1、定义组件
class Like extends React.Component {
//初始化状态
constructor (props) {
super(props)
this.state = {
isLikeMe:false
}
//将新增的方法中的this强制绑定为组件对象,
//bind 返回新的函数
this.handleClick = this.handleClick.bind(this)
}
//新添加的方法this默认不是组件对象，而是undefined
handleClick(){
// 更新状态
const isLikeMe = !this.state.isLikeMe
this.setState({isLikeMe})
}
render() {
//根据状态获取结果
const text = this.state.isLikeMe ? '你喜欢我' : '我喜欢你'
return <h2 onClick={this.handleClick}>{text}</h2>
}
}
//2、渲染组件标签
ReactDOM.render(<Like/>,document.getElementById('test')) </script>
</body>
</html>
React组件三大属性之state的更多相关文章
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React组件的属性
组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...
- 08_组件三大属性(2)_props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 09_组件三大属性(3)_refs和事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 07_组件三大属性(1)_state
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- 组件的三大属性state，props，refs与事件处理
组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...
随机推荐
- JSP三大指令是什么？
JSP页面中的指令JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言等.语法规则:<%@ 指令名 属性=值 属性=值 ... %>指令可以有很多个属性,它们以键值对的形 ...
- WPF 后台代码做 TranslateTransform 的动画
本文告诉大家,在后台代码,对 TranslateTransform 做动画的方法 今天小伙伴问我一个问题,说为什么相同的代码,如果设置到按钮上,是可以让按钮的某个属性变更,但是如果设置给 Transl ...
- 【NX二次开发】Block UI 集列表
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- 如何使用perf进行程序分析
1.安装. sudo apt-get install linux-tools 如果提示没有可安装候选.请输入: sudo apt-get install linux-perf-version 其中ve ...
- ConcurrentSkipListSet - 秒懂
疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 面试必备 + 面试必备 [博客园总入口 ] 疯狂创客圈 经典图书 : <Sprin ...
- Shiro-JWT SpringBoot前后端分离权限认证的一种思路
JWT-Shiro 整合 JWT-与Shiro整合进行授权认证的大致思路 图示 大致思路 将登录验证从shiro中分离,自己结合JWT实现 用户登陆后请求认证服务器进行密码等身份信息确认,确认成功后 ...
- 复习Spring第一课--Spring的基本知识及使用
关于Spring: spring容器是Spring的核心,该容器负责管理spring中的java组件, ApplicationContext ctx = new ClassPathXmlApplic ...
- B站英文教学视频的字幕获取 学习必看！
前言 最近在B站看一些纯英文的课程,视频课程有的是纯中文字幕的,有的是纯英文字幕的.由于英文的重要性,一份字幕的文档在我们观看后,留着日后粗略再读是很有益处的.但是为了得到这个英文字幕走了许多弯路.最 ...
- 一次性讲清楚spring中bean的生命周期之一：getSingleton方法
要想讲清楚spring中bean的生命周期,真的是不容易,以AnnotationConfigApplicationContext上下文为基础来讲解bean的生命周期,AnnotationConfigA ...
- Jenkins CI&CD 自动化发布项目实战(下篇)
Jenkins CI&CD 自动化发布项目实战(下篇) 作者 刘畅 时间 2020-12-04 实验环境 centos7.5 主机名 ip 服务配置 软件 gitlab 172.16.1.71 ...