[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 ...
随机推荐
- [Gauss]POJ3185 The Water Bowls
题意:反正就是要给的一串01的变成全0 能影响自己和左右 最少需要几步 01方程组 异或解 ][]; // 增广矩阵 ]; // 解 ]; // 标记是否为自由未知量 int n; void debu ...
- Qt中如何写一个model（自定义一个RowNode，我没有碰到过）
在qt中,用到最多就是model/view的结构来表示数据层及表示层的关系.model用于给view提供数据.那如何来实现一个简单的树形model呢. 实现一个自己的model需要重载以下的方法: Q ...
- WebBrowser控件的高级定制+mshtml
--> blog:WebBrowser控件的高级定制---以下为三篇重要的参考文献, 第一篇可以禁用了js弹窗和声音 第二篇的引用文献禁用了IE弹窗,但是原文的说明很好 第3篇 ...
- c++模板实现抽象工厂
类似于rime的rime::Class<factory type, product type>实现方式. C++模板实现的通用工厂方法模式 1.工厂方法(Factory Method)模式 ...
- APP-PER-50022: Oracle Human Resources could not retrieve a value for the User Type profile option.
Symptoms ----------------------- AP > Setup > Organizations Show Error tips: APP-PER-50022: Or ...
- [HDU 1011] Starship Troopers
Starship Troopers Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Mac OS X 10.10(yosemite)更新后,cocoapods出错, 及cocoapods更新至0.34后, 错误情况整理
1:Mac升级10.10后,执行pod install出错如下 QTX-Will-mini:NewHishop willbin$ pod install [!] Unable to load a sp ...
- c#调用带有安全认证的java webservice
最近使用c#调用另外一个同事写的java webservice耽误了很多时间,网上资料不太完整,走了很多弯路,希望对大家有帮助. 基本思路是1.拼装soap使用http post ,主要将验证身份信息 ...
- （转载）PHP的内存限制 Allowed memory size of 134217728 bytes exhausted (tried to allocate 1099 bytes) in
(转载)http://blog.csdn.net/beyondlpf/article/details/7794028 Fatal error: Allowed memory size of 13421 ...
- 洛谷P1238 走迷宫
洛谷1238 走迷宫 题目描述 有一个m*n格的迷宫(表示有m行.n列),其中有可走的也有不可走的,如果用1表示可以走,0表示不可以走,文件读入这m*n个数据和起始点.结束点(起始点和结束点都是用两个 ...