<!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. javascript设计模式学习之三—闭包和高阶函数

    一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. ...

  2. iOS开发——XML/JSON数据解析

    NSJSONSerialization 接下来就正式开始.苹果官方给出的解析方式是性能最优越的,虽然用起来稍显复杂. 首先我们在上面已经有了我希望得到的信息的网站的API给我们的URL,在OC中,我要 ...

  3. Java基础之写文件——将多个字符串写入到文件中（WriteProverbs）

    控制台程序,将一系列有用的格言写入到文件中. 本例使用通道把不同长度的字符串写入到文件中,为了方便从文件中恢复字符串,将每个字符串的长度写入到文件中紧靠字符串本身前面的位置,这可以告知在读取字符串之前 ...

  4. Swift实战-小QQ(第2章):QQ侧滑菜单

    QQ侧滑实现架构:需要建立以下几个ViewController:1.XQBaseViewController 2.LeftViewController3.RightViewController4.Co ...

  5. hdu1251（字典树）

    统计难题(hdu1251) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131070/65535 K (Java/Others) Tota ...

  6. FAQ: c++ 函数名后添加 const void function1(int &id) const

    说明这个函数不能修改这个类的成员变量!只能操作自己的参数和内部的范围变量! 括号内的&id,&表示这个变量和C# in和out是一样的,算是一个reference,可以更改值,要想不更 ...

  7. [原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. Python学习总结18：函数 参数篇

    1. 判断函数是否可调用 >>> import math >>> x = 1 >>> y = math.sqrt >>> cal ...

  9. sql 通过游标 拆分xml结构

    -----------------------定义游标变量------------------------------------------  DECLARE @propertyid INT   D ...

  10. -XX:+PrintGCDetails 打印GC详细信息

    -XX:+PrintGCDetails –打印GC详细信息     n-XX:+PrintGCDetails的输出 –Heap – def new generation   total 13824K, ...