<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>菜鸟教程 React 实例</title>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>

    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var HelloMessage=React.createClass({

        getInitialState:function(){

          return {value:'TTTK'};

        },

        handleChange:function(event){

          this.setState({value:event.target.value});

        },

        render:function(){

          var value=this.state.value;

          return(

            <div>

                <Content myDataProp={value} updateStateProp={this.handleChange}></Content>

            </div>

          );

        },

    });

    var Content=React.createClass({

      render:function(){

        return(

          <div>

            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}/>

            <h4>{this.props.myDataProp}</h4>

          </div>

        );

      },

      });

    ReactDOM.render(

      <HelloMessage/>,

      document.getElementById("example")

    );

    </script>

  </body>

</html>

　　react.js小案例（input框值变，对应变）

React.js入门小案例的更多相关文章

  1. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. 02SpringMvc_springmvc快速入门小案例（XML版本）

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  3. spring boot入门小案例

    spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...

  4. React.js 入门与实战课程思维导图

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...

  5. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  6. Hibernate的介绍及入门小案例

    1.Hibernate的诞生 在以前使用传统的JDBC开发应用系统时,如果是小型应用系统,并不觉得有什么麻烦,但是对于大型应用系统的开发,使用JDBC就会显得力不从心,例如对几十,几百张包含几十个字段 ...

  7. React.js - 入门

    React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...

  8. React.js入门笔记(再续)：评论框的实现

    本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...

  9. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

随机推荐

  1. Git_Commands

  2. IOS 加载Xib 后 如何 动态修改xib中的控件frame

    看看xib里view是不是设置了自动布局 use auto layout.取消掉就可以了.

  3. [原创]java WEB学习笔记70：Struts2 学习之路-- struts2拦截器源码分析，运行流程

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. C#: 启动画面设计

    Windows Form经常会在启动主界面的时候预先有启动画面,这也是因为用户体验的需要,用户知道已经启动application,而不是在load resource的时候等待.因此这里不能用单线程的思 ...

  5. ligerui_ligerTree_003_配置url参数，加载“树”

    配置url参数,加载“树”: 源码下载地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图:json.txt HTML代码: < ...

  6. 反射认识_02_反射成员变量Field

    包01: package ReflectionConstructor; public class ReflectionFieldPoint { private int x; public int y; ...

  7. PHP浮点数的一个常见问题的解答 (转载 http://www.laruence.com/2013/03/26/2884.html)

    不过, 我当时遗漏了一点, 也就是对于如下的这个常见问题的回答: <?php $f = 0.58; var_dump(intval($f * 100)); //为啥输出57 ?> 为啥输出 ...

  8. paper 53 ：深度学习（转载）

    转载来源:http://blog.csdn.net/fengbingchun/article/details/50087005 这篇文章主要是为了对深度学习(DeepLearning)有个初步了解,算 ...

  9. 救火必备linux命令

    系统参数: cat /proc/cpuinfo cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数: )top M:按内存使用排序 ...

  10. 【py分析】使用SGMLParser分析淘宝html

    SGMLParser Python 默认自带 HTMLParser 以及 SGMLParser 等等解析器,前者实在是太难用了,我就用 SGMLParser 写了一个示例程序: import urll ...