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的更多相关文章

  1. [React Fundamentals] State Basics

    State is used for properties on a component that will change, versus static properties that are pass ...

  2. [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 ...

  3. React入门---属性(state)-7

    state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...

  4. 说说React组件的State

    说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...

  5. React组件的State

    React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...

  6. react native中state和ref的使用

    react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...

  7. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  8. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  9. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

随机推荐

  1. scrollView的几个属性contentSize contentOffset contentInset

    01-  ontentSize是scrollview可以滚动的区域 比如frame = (0 ,0 ,320 ,480) contentSize = (320 ,960), 代表你的scrollvie ...

  2. *[codility]ArrayInversionCount

    http://codility.com/demo/take-sample-test/arrayinversioncount 求逆序对数,归并排序并记录逆序次数. // you can also use ...

  3. [jobdu]第一个只出现一次的字符

    刚开始还在想双指针,完全没必要.然后最土的可以扫两遍O(n),用一个数组记录出现次数.然后想到如果数组里记录出现的位置,可以只扫一遍O(n),第二遍扫字符集就行了. #include <iost ...

  4. Java异常处理之try-catch-finally

    /** * @author Administrator * 功能:异常 */ package com.test; import java.io.*; import java.net.*; public ...

  5. altium6.x中自动删除重复走线的位置

    在protel 2004 DXP中,“自动删除走线”的位置就在"PCB Editor"的默认页面,非常好找. 但是升级到了altium 6.7,6.9之后,很多人就找不到这个了. ...

  6. ActionBar官方教程(10)ActionBar的下拉列表模式

    Adding Drop-down Navigation As another mode of navigation (or filtering) for your activity, the acti ...

  7. ActionBar官方教程(4)给ActionBar添加操作项及它们的事件处理

    Adding Action Items The action bar provides users access to the most important action items relating ...

  8. LFS 中文版手册发布：如何打造自己的 Linux 发行版

    您是否想过打造您自己的 Linux 发行版?每个 Linux 用户在他们使用 Linux 的过程中都想过做一个他们自己的发行版,至少一次.我也不例外,作为一个 Linux 菜鸟,我也考虑过开发一个自己 ...

  9. ASP.NET MVC3细嚼慢咽---(3)Razor视图语法

    MVC3.0中新增加了Razor视图,Razor视图的语法以@符号为核心,貌似在这个时代离不开@了,微博,邮箱都用这个. 1.输出变量和文本 @DateTime.Now @for (int i = 0 ...

  10. BrnShop开源网上商城第六讲：扩展视图功能

    在正式讲解扩展视图功能以前,我们有必要把视图的工作原理简单说明下.任何一个视图都会被翻译成一个c#类,并保存到指定的位置,然后被编译.这也就是为什么能在视图中包含c#代码片段的原因.下面我们通过一个项 ...