<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. python+selenium+Robot

    准备工作: 1.下载python2.7 http://python.org/getit/ 2.下载下载setuptools [python 的基础包工具] 可以帮助我们轻松的下载,构建,安装,升级,卸 ...

  2. Cocostudio 文章列表

    Cocostudio 文章列表 Cocostudio(1) 容器层的使用- ScrollView ListView PageViewhttp://www.cnblogs.com/TS-qrt/arti ...

  3. AppFuse3.5对接oracle数据库

    AppFuse是一个使用Java语言开发web应用系统的集成框架.java开发人员最头痛的事情就是面对大量的框架不知该如何选择.这些框架性能如何,兼容性如何等等都需要筛选比较.Appfuse作者Mat ...

  4. JavaScript标准库之 - Math

    属性 Math.E 欧拉常数,也是自然对数的底数, 约等于 2.718. Math.LN2 2的自然对数, 约等于0.693. Math.LN10 10的自然对数, 约等于 2.303. Math.L ...

  5. 积木大赛 noip2013提高组day2

    这道题一开始想到处理中间是0的位置,但这样时间太慢了,后来想到一种类似二分的方法,就是把这一段的最小值找到,全部减去最小值,然后有0一出现,就又递归处理前一段,每次答案就加上这一段的最小值: AC代码 ...

  6. Individual Project - Word frequency program - Multi Thread And Optimization

    作业说明详见:http://www.cnblogs.com/jiel/p/3978727.html 一.开始写代码前的规划: 1.尝试用C#来写,之前没有学过C#,所以打算先花1天的时间学习C# 2. ...

  7. Export GridView Data to Excel. 从GridView导出数据到Excel的奇怪问题解析

    GridView导出函数内容如下 string attachment = "attachment; filename=Contacts.xls";            Respo ...

  8. wrHDL编译中软核代码初始化及编译耗时长的问题

    问题的提出整个WR的ISE工程比较大,编译时间很长,导致开发效率低.通过分析发现,ISE在综合的时候大量的时间都花在了初始化DPRAM上.调研发现Xilinx提供了BMM文件和DATA2MEM工具,可 ...

  9. Oracle的update语句优化研究

    最近研究sql优化,以下文章转自互联网: 1.     语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...

  10. 让.NET xml序列化支持Nullable

    .NET的序列化,关于契约类的生成我们都是通过xsd.exe,对于值类型的可空判断是通过声明同名+Specified的bool属性来判断,比如: public class Person { publi ...