<div id="app"></div>

<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<!-- 引入React的一个扩展 -->
<script src="bower_components/react/react-with-addons.min.js"></script>
<script src="lib/babel-core/browser.min.js"></script>
<script type="text/babel">
    var EasyForm = React.createClass({
        // 引入mixins
        mixins: [React.addons.LinkedStateMixin],
        getInitialState: function () {
            return {
                message: 'react is awesome',
                isReactAwesome: true
            }
        },
        render: function () {
            return (
                <div>
                    <h1>我想说:{this.state.message}</h1>
                    <h2>React是不是很好用? {this.state.isReactAwesome ? '非常好用!' : '一般般。。。'}</h2>
                    <input type="text" valueLink={this.linkState('message')}/>
                    <br/>
                    <input type="checkbox" checkedLink={this.linkState('isReactAwesome')}/>
                    <br/>
                    <SubComp {...this.props}/><!--spread-->
                </div>
            );
        }
    });

    var SubComp = React.createClass({
        render: function () {
            return (
                <div>
                    <h3>这是个子组件哦</h3>
                    <SubSubComp {...this.props}/>
                </div>
            )
        }
    });

    var SubSubComp = React.createClass({
        render: function () {
            return (
                <div>
                    <p>你想说什么?</p>
                    <input type="text" valueLink={this.props.messageLink}/>
                    <p>你稀罕React么?</p>
                    <input type="checkbox" checkedLink={this.props.likeLink}/>
                </div>
            )
        }
    });

    ReactDOM.render(
        <EasyForm/>,
        document.getElementById('app')
    );
</script>

React(二)实现双向数据流的更多相关文章

  1. Vue.js实现数据的双向数据流

    众所周知,Vue.js一直使用的是单向数据流的,和angularJs的双向数据流相比,单向数据流更加容易控制.Vue.js允许父组件通过props属性传递数据到子组件.但是有些情况下我们需要在子组件里 ...

  2. 深入理解React(二) —— 数据流和事件原理

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...

  3. 手把手教你全家桶之React(二)

    前言 上一篇已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用. 热更新 我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新.并而不 ...

  4. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  5. React简单实现双向数据绑定

    import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Componen ...

  6. 在React中使用Redux数据流

    问题:数据流是什么呢?为什么要用数据流? 答案:1.数据流是我们的行为与相应的抽象 2.使用数据流帮助我们明确了行为的对应的响应 问题: React与数据流的关系 1.React是纯 V 层的前端框架 ...

  7. react 实现数据双向绑定

    好久没有更新了 只是都写在有道笔记中 今天整理下 一些基础的 大神勿喷 一个基础的不能再基础的数据双向绑定 因为react不同于vue 没有v-model指令 所以怎么实现呢? import Reac ...

  8. 正式学习react(二)

    今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...

  9. 五分钟学习React(二):我的第一个Hello World

    我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...

随机推荐

  1. c#数据库访问读取数据速度测试

    1,使用byte数据读取 2,使用dataset数据读取

  2. VS2012中,C# 配置文件读取 + C#多个工程共享共有变量 + 整理using语句

    (一) C# 配置文件读取 C#工程可以自动生成配置文件,以便整个工程可以使用设置的配置进行后续的处理工作. 1. 首先,右键工程文件-->Properties -->settings-- ...

  3. 写好Hive 程序的若干优化技巧和实际案例

    使用Hive可以高效而又快速地编写复杂的MapReduce查询逻辑.但是一个”好”的Hive程序需要对Hive运行机制有深入的了解,像理解mapreduce作业一样理解Hive QL才能写出正确.高效 ...

  4. SIFT中的尺度空间和传统图像金字塔

    SIFT中的尺度空间和传统图像金字塔 http://www.zhizhihu.com/html/y2010/2146.html 最近自己混淆了好多概念,一边弄明白的同时,也做了一些记录,分享一下.最近 ...

  5. PCA降维

    http://blog.csdn.net/a784763307/article/details/17289317 这篇比较棒 openCV版 void PrintMatrix(CvMat *Matri ...

  6. On One Side Kolmogorov Type Inequalities

    Let \(X_1,X_2,\ldots,X_n\) be independent random variables. Denote \[S_n=\sum_{i=1}^n X_i.\] The  we ...

  7. MVC_Controller

    准备工作 安装VS2010或更高版本 安装数据库2008或更高版本 视个人系统不同配置IIS本地服务 数据库和VS下载地址 http://msdn.itellyou.cn/ 本节目标 通过本节案例对M ...

  8. 如何查看Android的Keystore文件的SHA1值

    像使用百度地图api时候,一般需要获取keystore的SHA1值,这里就手把手教大家如何查看Android的keystore文件中的SHA1值. 第一步: 打开cmd,切换到keystore所在的文 ...

  9. JDBC数据类型

    JDBC数据类型 JDBC驱动程序Java数据类型转换到适当的JDBC类型然后再将它发送到数据库.它使用默认的大多数数据类型映射.例如,一个Java int转换成一个SQL INTEGER.创建默认映 ...

  10. Java虚拟机6:内存溢出和内存泄露、并行和并发、Minor GC和Full GC、Client模式和Server模式的区别

    前言 之前的文章尤其是讲解GC的时候提到了很多的概念,比如内存溢出和内存泄露.并行与并发.Client模式和Server模式.Minor GC和Full GC,本文详细讲解下这些概念的区别. 内存溢出 ...