[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 ...
随机推荐
- java super 隐式参数
第41集 所有构造器里,第一句话就是super() (隐式的,系统自动执行) 鸟构造器调用动物构造器,动物构造器调用object构造器. (系统默认的) tostring() 方法 ...
- [状压dp]HDU5045 Contest
题意: n和人做m道题, 每俩人做的题数不能相差一题以上.(也就是每n道题分别由n个人完成) 给n个人分别做m道题的概率, 求完成m题的最大期望 $1\le N \le 10$ 注意!!! fil ...
- 一个CLI的 的例子
1)这是CLI 调用HTTPOST例子 #using <System.dll> using namespace System;using namespace System::Net;usi ...
- HashMap与HashTable联系与区别
HashMap与HashTable 1.hashMap去掉了HashTable 的contains方法,但是加上了containsValue()和containsKey()方法. 2.hashTabl ...
- 微信JSSDK与录音相关的坑
欢迎各位转载, 以让微信团队重视这些恼人的BUG. 请注明出处微信JSSDK与录音相关的坑 by lzl124631x 最近一直在做微信JSSDK与录音相关的功能开发, 遇到了各种奇尺大坑, 时不时冷 ...
- Drawable(3)Color State List Resource
注意 Color State List Resource 与 Color不同,前者是颜色状态表.根据不同状态显示不同颜色,它是State list,里面有多种颜色,后者只是一个颜色. Color St ...
- mplayer windows configure修改
相信大家在编译mplayer的时候,都会遇到一个问题,就是那个折腾人的mplayer会检测当面目录下有没有ffmpeg的文件夹. 没有的话,mplayer会启动git进行漫长的下载ffmpeg源码.其 ...
- 关于“javax.servlet.include.request_uri”属性值
在springMVC的DispatcherServlet类的doService方法中有如下代码: if (WebUtils.isIncludeRequest(request)) { attribute ...
- BZOJ_1600_[Usaco2008_Oct]_建造栅栏_(动态规划)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1600 将长度为n的线段分成4段,长度为整数,围成面积>0的四边形,求方案数. 分析 首先 ...
- Google Chrome中的高性能网络(一)
以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...