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. asp.net 简单实现禁用或启用页面中的某一类型的控件

    我们在提交一个表单的时候,可能由于网络或服务器的原因,处理很慢,而用户在处理结果出来之前反复点击按钮提交.这样很容易造成不必要的麻烦甚至是错误.说了这么多,其实就是要实现一个禁用某些控件的一种功能.好 ...

  2. 调色板QPalette类用法详解（附实例、源码）

    http://blog.csdn.net/rl529014/article/details/51589096

  3. 关于方程x^2+y^2=p (p为素数)的解问题

    问题描述:对于方程,其中为素数,x,y为整数,且,输出符合条件的x,y. 分析:对于本方程,我们通过费马平方和定理知道,只有奇素数p满足这个条件时才有解. 那么当此方程有解时,解有几个呢?很明显不可能 ...

  4. WinForm实现简单的拖拽功能(C#)

    用到了ListBox和TreeView两个控件,ListBox作为数据源,通过拖拽其中的数据放置到TreeView上,自动添加一个树节点 ListBox控件的MouseDown用于获取要拖拽的值并调用 ...

  5. 【HDOJ】1073 Online Judge

    这道题TLE了N多次,完全不明白为什么,稍微改了一下,居然过了.使用gets过的,看讨论帖有人还推荐用hash. #include <stdio.h> #include <strin ...

  6. IQ Test

    IQ Test Description: Bob is preparing to pass IQ test. The most frequent task in this test is to fin ...

  7. 下拉列表联动显示（Car表） 三级联动

    .Models namespace 下拉列表联动显示_Car表_.Models { public class ProductorBF { private MyDBDataContext _contex ...

  8. wifi配置常用命令总结

    1:iwlist eth1 scanning 查看无线路由 2:iwconfig eth1 essid "无线路由的名称" 3: ifconfig eth1 IP 4: route ...

  9. [转]NHibernate之旅(11)：探索多对多关系及其关联查询

    本节内容 多对多关系引入 多对多映射关系 多对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 多对多关系引入 让我们再次回顾在第二篇中建立的数据模型 ...

  10. 《HTML5与CSS3基础教程》笔记

    以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...