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来更新对应的页面显示(重新渲染组件) 初 ...
随机推荐
- 将视频插入视频：CVPR2019论文解析
将视频插入视频:CVPR2019论文解析 Inserting Videos into Videos 论文链接: http://openaccess.thecvf.com/content_CVPR_20 ...
- 3D MinkowskiEngine稀疏模式重建
3D MinkowskiEngine稀疏模式重建 本文看一个简单的演示示例,该示例训练一个3D卷积神经网络,该网络用一个热点向量one-hot vector重构3D稀疏模式.这类似于Octree生成网 ...
- 在OpenShift平台上验证NVIDIA DGX系统的分布式多节点自动驾驶AI训练
在OpenShift平台上验证NVIDIA DGX系统的分布式多节点自动驾驶AI训练 自动驾驶汽车的深度神经网络(DNN)开发是一项艰巨的工作.本文验证了DGX多节点,多GPU,分布式训练在DXC机器 ...
- ApplicationListener接口，在spring容器初始化后执行的方法
一.如果我们希望在Spring容器将所有的Bean都初始化完成之后,做一些操作,那么就可以使用ApplicationListener接口,实现ApplicationListener接口中的onAppl ...
- SQL注入问题------JDBC编写简单登录代码
一.什么是sql注入 sql注入:用户输入的内容, 有一些sql的特殊关键字参与字符串的拼接,完成了一条逻辑发生变化的新的SQL语句 !用代码举个例子简单说明一下: package cn.zhbit. ...
- python赋值，深拷贝和浅拷贝的区别
1.赋值 list1=[[1,2],'fei',66] list2=list1 list1 [[1, 2], 'fei', 66] list2 [[1, 2], 'fei', 66] list2.ap ...
- UF_DRF 制图符号标注尺寸
Open C uc5530uc5531uc5532uc5533uc5534uc5540uc5541uc5542uc5543uc5550uc5551uc5563uc5566uf5505uf5506uf5 ...
- UF_LAYOUT 布局相关
Open C uc6460uc6462uc6463uc6464 根据视图名称旋转视图,在布局中替换视图uc6466uc6467uc6468uc6469uc6470uc6471uc6472uc6473
- noip2007 总结
统计数字 原题 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺 ...
- CMD批处理（1）——批处理常用命令总结
echo 打开回显或关闭回显功能,或显示消息.如果没有任何参数,echo命令将显示当前的回显设置. 命令格式1:echo [{on|off}] 命令格式2:echo [message] 例.在命令 ...