<!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. 如何调试DLL组件

    因为DLL组件不像EXE是程序的入口,所以DLL需要其他进程的调用才能调试. 1.首先在DLL项目中你想调试的位置打好断点. 2.如果已经有一个进程,比如foo.exe已经启动,那么就用:调试> ...

  2. iOS -Swift 3.0 -Array(数组与可变数组相关属性及用法)

    // // ViewController.swift // Swift-Array // // Created by luorende on 16/9/12. // Copyright © 2016年 ...

  3. interblock corruption & intrablock corruption

    interblock corruption: corruption blocks rather than within the block itself. can only be logical co ...

  4. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  5. Java基础之访问文件与目录——移动或复制文件和目录（MoveAndCopyFiles）

    控制台程序,创建和删除目录以及复制和移动文件. import java.nio.file.*; import java.nio.file.attribute.*; import java.io.IOE ...

  6. 操作系统：进程管理和IO控制

    一.进程管理 进程管理包括进程控制,进程调度,进程同步与通信,死锁控制四个内容. (一)进程控制 进程是操作系统中运行的基本单位,包括程序段,数据段和进程控制段.操作系统通过进程控制块(PCB)管理进 ...

  7. Azure 意外重启, 丢失sql server master表和 filezilla

    突然发现今晚网站打不开了,提示连不上数据库. ftp也连不上了. 远程连上Azure 发现机器意外重启, 丢失sql server master表和 filezilla 要重新安装. 又耗费我几个小时 ...

  8. NSMutableDictionary中元素替换

    NSMutableDictionary *dic = [NSMutableDictionary new]; [dic addEntriesFromDictionary:@{@"key&quo ...

  9. As3 Anchored Container 代码设置锚点旋转

    原文地址:http://jamesvango.co.uk/blog/?p=136

  10. csuoj 1120: 病毒

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1120 1120: 病毒 Time Limit: 3 Sec  Memory Limit: 128 ...