<!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. ajax异步提交文件

    首先 下载jquery和jquery.form.js   http://malsup.com/jquery/form/ <script type="text/javascript&qu ...

  2. css 字体样式

    [强制] font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中. 解释: 所谓英文 Family Name,为字体文件的一个元数据,常见名称 ...

  3. Feature Scaling

    定义:Feature scaling is a method used to standardize the range of independent variables or features of ...

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

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

  5. Git_Commands

  6. 【你吐吧c#每日学习】10.30 C#Nullable Types

    分两种类型,value type and reference type. By default, value type owns a default value. For integer, the d ...

  7. Java基础(32):String与StringBuilder、StringBuffer的区别（String类）

    在Java中,除了可以使用 String 类来存储字符串,还可以使用 StringBuilder 类或 StringBuffer 类存储字符串,那么它们之间有什么区别呢? String 类具有是不可变 ...

  8. MVC模型 简介

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...

  9. DataTable 筛选数据

    //使用聚合函数 max ,sum  ,count .... private void ComputeBySalesSalesID(DataSet dataSet) {     // Presumes ...

  10. server端推送消息机制

    推送技术相关请参加WIKI: https://zh.wikipedia.org/wiki/%E6%8E%A8%E9%80%81%E6%8A%80%E6%9C%AF 场景: 监控系统:后台硬件温度.电压 ...