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来更新对应的页面显示(重新渲染组件) 初 ...
随机推荐
- python_request的安装及模拟json的post请求及带参数的get请求
一.Requests模块安装 安装方式一:执行 pip install -U requests 联网安装requests 安装方式二:进入https://pypi.org/project/reques ...
- Java 反射编程(上)
文章目录 反射的泛型就是用`? `来描述 反射与类的操作 (取得父类信息) 取得父类信息 1. 获得本类的包名称: 2. 取得父类的Class 对象 3. 取得父类接口 案例: 使用上述方法 反射与类 ...
- 【零基础学深度学习】动手学深度学习2.0--tensorboard可视化工具简单使用
1 引言 老师让我将线性回归训练得出的loss值进行可视化,于是我使用了tensorboard将其应用到Pytorch中,用于Pytorch的可视化. 2 环境安装 本教程代码环境依赖: python ...
- 日常Bug排查-Nginx重复请求？
日常Bug排查-Nginx重复请求? 前言 日常Bug排查系列都是一些简单Bug排查,笔者将在这里介绍一些排查Bug的简单技巧,其中不乏一些看起来很低级但很容易犯的问题. 问题现场 有一天运维突然找到 ...
- Appium UI自动化测试
#coding:utf-8 from appium import webdriver import time,traceback ''' desired_capabilities:这些键告诉appiu ...
- Java调试大法，来了~
很多同学经常问我:彤哥,你的源码为什么讲的那么好那么细,有没有什么方法? 此时,我一般回复四个字:调试大法. 然后,他们就会很懵逼:调试我也会呀,但是,我就做不到你那么细(像是在夸我),难道调试还有我 ...
- 实验6、Flask API使用示例和拓展
实验介绍 1. 实验内容 Flask 提供了多种API拓展,本节我们主要学习基于RESTful的Flask应用程序设计 2. 实验要点 学习和掌握多种RESTful的设计模式 3.实验环境 Cento ...
- 【VBA】excel自动换名字打印
源码: Sub m() For i = 1 To 100 ActiveSheet.PrintOut copies:=1 Cells(1, 1) = Sheets(2).Cells(i, 1) Next ...
- 消息队列面试题、RabbitMQ面试题、Kafka面试题、RocketMQ面试题 （史上最全、持续更新、吐血推荐）
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- Air722UG_模块硬件设计手册_V1.1
下载PDF版本: Air722UG_模块硬件设计手册_V1.1.pdf @ 目录 1. 绪论 2.综述 2.1 型号信息 2.2 主要性能 2.3 功能框图 3.应用接口 3.1 管脚描述 3.2 工 ...