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. 找不到mysql服务或mysql服务名无效

    问题原因:mysql服务没有安装. 解决办法: 在 mysql bin目录下 以管理员的权限 执行 mysqld -install命令 出现:Service successfully installe ...

  2. JavaWeb学习总结(三十五)——使用JDBC处理Oracle大数据

    一.Oracle中大数据处理 在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这种 ...

  3. ANDROID_MARS学习笔记_S01原始版_008_Looper\Bundle异步消息处理

    一.流程 1.自定义Handler,重写handleMessage(Message msg),用msg得到bundle,从而得到传递过来的数据 2.开启android.os.HandlerThread ...

  4. Nagios Core/Icinga 基于栈的缓冲区溢出漏洞

    漏洞名称: Nagios Core/Icinga 基于栈的缓冲区溢出漏洞 CNNVD编号: CNNVD-201402-484 发布时间: 2014-03-03 更新时间: 2014-03-03 危害等 ...

  5. SCOI2007排列perm

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 805  Solved: 497[Submit][Stat ...

  6. CodeForces 1

     A- Theatre Square Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  7. [King.yue]Ext.NET相比WebForm的优势

    1)更好的用户体验.(生产力++) 虽然WebForm可以使用微软的Ajax以及Ajax控件进行开发,但是用户体验还是远远不及extjs.而且你可以跟客户忽悠,这个功能多么滴难做,多么好,但是我们做出 ...

  8. seleniumRC启动及浏览器实例配置

    一.firefox浏览器实例配置 1.启动用户配置文件管理器 重要:在启动用户配置文件管理器之前,Firefox必须完全关闭.     1)按 support.cdn.mozilla.net/medi ...

  9. 为EF DbContext生成的实体添加注释（T5模板应用）[转]

    1 先加上类注释 找到这行代码WriteHeader(codeStringGenerator, fileManager): 在它下面加上我们的代码: string summary=string.Emp ...

  10. GTK+中的构件II(Widgets)

    GTK+中的构件II(Widgets) GTK+中的构件II(Widgets) 在本章的GTK+程序设计中,我们仍然要继续向大家介绍和展示各种各样的构件. GtkComboBox GtkComboBo ...