[React] React Fundamentals: State Basics
State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.
Properties vs. State
When you think of properties, you should be thinking of component initialisation. When you think of state, you should think of an internal data-set which affects the rendering of components.
Setting Initial State:
This is done by defining a method called getInitialState() and returning an object.
Setting State:
Setting state should only be done from inside the component. As mentioned, state should be treated as private data, but there are times when you may need to update it. setState()
Replacing State:
It’s also possible to replace values in the state by using the replaceState()method.
/**
* @jsx React.DOM
*/ var InterfaceComponent = React.createClass({
getInitialState : function() {
return {
first : "chris",
last : "pitt"
};
},
handleClick : function() {
this.replaceState({
first : "bob"
});
},
render : function() {
return <div onClick={this.handleClick}>
hello { this.state.first + " " + this.state.last }
</div>;
}
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Lesson 3: state</title>
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx"> var React_app = React.createClass({
getInitialState: function() {
return {
name: "Joe"
}
},
myUpdate: function(e){
this.replaceState({name: e.target.value});
},
render: function() {
return (
<div>
Your name: <input type="text" onChange={this.myUpdate}/>
<h1>{this.state.name}</h1>
</div>
);
}
}); React.render(<React_app />, document.body);
</script>
</body>
</html>
More:
https://medium.com/react-tutorials/react-state-14a6d4f736f5
https://egghead.io/lessons/react-state-basics
[React] React Fundamentals: State Basics的更多相关文章
- [React Fundamentals] State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
- React入门---属性(state)-7
state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...
- 说说React组件的State
说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...
- React组件的State
React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...
- react native中state和ref的使用
react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
随机推荐
- easyui源码翻译1.32--NumberSpinner（数字微调）
前言 扩展自$.fn.spinner.defaults和$.fn.numberbox.defaults.使用$.fn.numberspinner.defaults重写默认值对象.下载该插件翻译源码 数 ...
- QT中的字符串处理函数
Fn 1 : arg 这个函数的具体声明不写了,它有20个重载,典型的示例代码如下: 1: #include <QtCore/QCoreApplication> 2: #include & ...
- QTY N.W G.W
QTY(Quantity) - 数量 [英文缩写]QTY[英文全称]Quantity[中文解释]数量 A.毛重:Gross Weight是指商品本身的重量加皮重(tare),也即商品连同包装的重量.有 ...
- Android 滑动菜单SlidingMenu
首先我们看下面视图: 这种效果大家都不陌生,网上好多都说是仿人人网的,估计人家牛逼出来的早吧,我也参考了一一些例子,实现起来有三种方法,我下面简单介绍下: 方法一:其实就是对GestureDetect ...
- Yii CDbCriteria
Yii的Active Recorder包装了很多. 特别是把SQL中 把where,order,limit,IN/not IN,like等常用短句都包含进CDbCriteria这个类中去,这样整个代码 ...
- SharePoint对象模型性能考量
转:http://blog.csdn.net/ma_jiang/article/details/6553373 部分常见用例场景都是关于显示和编辑SharePoint列表的--可惜,这也是我们看到很多 ...
- ArcGIS for Android 中MapView的地图背景设置
转自:http://blog.csdn.net/wozaifeiyang0/article/details/7535704 根据多方面测速,终于解决了一个蛋疼的问题,MapView的背景设置问题. 在 ...
- Mvc自定义分页控件
MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...
- 安装qc 出现error An error occurred while attempting to connect to the database.
When trying to install mercury quality center starter edition 9.0 on Windows XP media center, I am g ...
- JZ2440开发笔记（7）——2440启动方式
JZ2440的启动方式有两种,一种是从NOR FLASH中启动,还有一种就是从NAND FLASH中启动. 如果从NOR FLASH启动,CPU会访问NOR FLASH的0地址,而0地址位于BANK0 ...