[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 ...
随机推荐
- Linux使用wake_up_interruptible()唤醒注册到等待队列上的进程
http://blog.sina.com.cn/s/blog_4770ef020101h48l.html 功能:唤醒注册到等待队列上的进程 原型: #include void ...
- 【HDOJ】Power Stations
DLX.针对每个城市,每个城市可充电的区间构成一个plan.每个决策由N*D个时间及N个精确覆盖构成. /* 3663 */ #include <iostream> #include &l ...
- Binary to Text (ASCII) Conversion
Binary to Text (ASCII) Conversion Description: Write a function that takes in a binary string and re ...
- C++文件读写总结
在C++中如何实现文件的读写? 作者: infobillows 发表日期: 2007-04-03 21:33 点击数: 465 一.ASCII 输出 为了使用下面的方法, 你必须包含头文件<fs ...
- 2016年中国500强利润率最高的公司，中国500强最赚钱的40家公司，ROE最高的公司
2016年中国500强利润率最高的公司 排名 公司名称 利润率 62 阿里巴巴集团控股有限公司 73.09% 87 百度股份有限公司 50.71% 195 国信证券股份有限公司 47.87% ...
- VJP1456 最小总代价（状压）
链接 这题卡了一天 刚开始没考虑第一个传的和最后一个传的 感觉挺简单 啪啪的敲完 居然还过了17组数据.. 正解:dp数组一维保存状态 一维保存当前传到了谁 再枚举是由谁传过来的 这样可以保证正确性 ...
- 分布式缓存系统Memcached简介与实践(.NET memcached client library)
缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵 ...
- WinForm打印之页边距
1.启用页边距: 默认情况下PrintDocument是不理会页边距的(MS再次让人无语...),这也是为什么有人说明明设了页边距在打印预览里却没有效果的原因. 解决办法是设置PrintDocumen ...
- boost总结之variant
boost的variant库类似于联合体,但是联合体中只能接受POD类型,但variant中并无此限制,它可以接受任意的类型. boost::variant <int, std::strin ...
- javaweb 之javascript 结合
1.javascript的简介 * 是基于对象和事件驱动的语言,应用与客户端. - 基于对象: ** 提供好了很多对象,可以直接拿过来使用 - 事件驱动: ** html做网站静态效果,javascr ...