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. 一个灵巧的Delphi多播实事件现方案

    一个灵巧的Delphi多播实现方案.必须是支持泛型的Delphi版本.也就是Delphi2009以后.强烈建议用DelphiXE. 用法就是例如写一个Class指定一个Event,触发的时候会通知多个 ...

  2. C++:undefined reference to vtable 原因与解决办法[转]

    [转]undefined reference to vtable 原因与解决办法 最近在写一套基础类库用于SG解包blob字段统计,在写完了所有程序编译时遇到一个郁闷无比的错误: MailBox.o( ...

  3. FastJSON学习

    这几天在用FastJSON,发现需要测试一些关键点,包括: 1.是否支持内部类:测试结果是支持,但是需要设置为静态类(static) 2.是否支持继承的自动序列化及反序列化:测试结果是支持 3.缺字段 ...

  4. -fembed-bitcode is not supported on versions of iOS prior to 6.0 问题修复

    参考一下网址 http://stackoverflow.com/questions/30867544/fembed-bitcode-is-not-supported-on-versions-of-io ...

  5. PowerStack

    int curInc; HashMap<Integer, Integer> incMap; Stack<Integer> stack; public SuperStack() ...

  6. bzoj1821

    题目要求最近的两个部落间距尽可能最远 不难想到一种贪心的方法,对每两个点之间距离从小到大排序, 把每个点看成一个部落 然后不断将距离近的两个部落合并成一个部落,直到剩下了k个部落,那么下一条不同部落之 ...

  7. 深入.net平台和c#编程 学习笔记

    深入.net平台和c#编程 一:理解.nteFramwork与c# 1.1,:Microsoft.net框架概述 1.2:.net框架结构 1.3.:c#语言概述 1.4:体验框架类库的强大功能 二: ...

  8. -_-#【减少 DOM 访问】缓存已经访问过的元素

    Minimize DOM Access Cache references to accessed elements 选择器查询是开销很大的方法.所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的 ...

  9. c# 模拟http post 带cookie

    下面的代码是自动向cnblogs中的小组发帖.........注意小组ID,主题ID,小组类型 首先采用firebug分析到发帖时的post地址以及参数,其中在headers中包含了cookies,把 ...

  10. SQL Server触发器以及如何在SQL Server Manager中调试触发器

    ·只有inserted表有数据时,当前操作为insert:·inserted和deleted两张表都有数据时,当前操作为update:·只有deleted表有数据时,当前操作为delete. 1. C ...