<!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. YII实现Memcache故障转移的配置办法

    YII在默认配置下连接Memcache失败时会报错,要想实现故障转移就要改一下配置和代码 1.首先修改一下YII的 caching/CMemCache.php,我的版本是 1.1.7 找到 $cach ...

  2. pip报ssl错误解决

     InsecurePlatformWarning: A true SSLContext object is not available.   # yum -y install openssl-deve ...

  3. ARM 嵌入式中断

    1. SATA中断要打开,挂在fiq上(通过cpu中断的fiq中断enable位,对sata中断使能), 2.外设及GPIO中断打开,挂在irq上(通过cpu中断的irq 的enable位对其使能), ...

  4. [reprint]如何编写引导程序 Hello World

    在存储介质(硬盘.软盘.光盘)中有一块特殊的区域,叫做引导区.在计算机启动后,BIOS会读取引导区内的代码到内存中去,然后将执行这些代码.引导区的位置和大小与计算机的平台有关,对于IBM-PC兼容机, ...

  5. js拖拽换位置，使用数组方法

    之前一直需要一个拖拽效果,网上找了些感觉不是不好用,就是写的有些地方让人不太满意,下面贡献一个自己写的.亲测可用,拖动后可互换位置!(带有注释) 方法/步骤 CSS代码部分 <style> ...

  6. csuoj 1113: Updating a Dictionary

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1113 1113: Updating a Dictionary Time Limit: 1 Sec  ...

  7. CCF真题之相反数

    201403-1 问题描述 有 N 个非零且各不相同的整数.请你编一个程序求出它们中有多少对相反数(a 和 -a 为一对相反数). 输入格式 第一行包含一个正整数 N.(1 ≤ N ≤ 500).   ...

  8. CSS_03_01_CSS组合选择器

    CSS组合选择器 第01步:创建css:with.css @charset "utf-8"; /* 组合选择器,用","隔开 */ .a,.b,div span ...

  9. （转）SQL Server 2005 中的计算字段

    在实际工作上遇到的问题: 在订单表中有某项商品是将“订购数量(Quantity)”乘以“单件价格(UnitCost)”等于该项商品的总价(Subtotal). 在数据表中有的列(以下皆改叫为“字段”) ...

  10. oracle随机取数据

    select * from (select rownum,KEYWORD, CATEGORY,CREATE_DATE,UPDATE_DATE from (select * from knet_keyw ...