React(二)实现双向数据流
<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(二)实现双向数据流的更多相关文章
- Vue.js实现数据的双向数据流
众所周知,Vue.js一直使用的是单向数据流的,和angularJs的双向数据流相比,单向数据流更加容易控制.Vue.js允许父组件通过props属性传递数据到子组件.但是有些情况下我们需要在子组件里 ...
- 深入理解React(二) —— 数据流和事件原理
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...
- 手把手教你全家桶之React(二)
前言 上一篇已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用. 热更新 我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新.并而不 ...
- React中的“双向绑定”
概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...
- React简单实现双向数据绑定
import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Componen ...
- 在React中使用Redux数据流
问题:数据流是什么呢?为什么要用数据流? 答案:1.数据流是我们的行为与相应的抽象 2.使用数据流帮助我们明确了行为的对应的响应 问题: React与数据流的关系 1.React是纯 V 层的前端框架 ...
- react 实现数据双向绑定
好久没有更新了 只是都写在有道笔记中 今天整理下 一些基础的 大神勿喷 一个基础的不能再基础的数据双向绑定 因为react不同于vue 没有v-model指令 所以怎么实现呢? import Reac ...
- 正式学习react(二)
今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...
- 五分钟学习React(二):我的第一个Hello World
我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...
随机推荐
- c#数据库访问读取数据速度测试
1,使用byte数据读取 2,使用dataset数据读取
- VS2012中,C# 配置文件读取 + C#多个工程共享共有变量 + 整理using语句
(一) C# 配置文件读取 C#工程可以自动生成配置文件,以便整个工程可以使用设置的配置进行后续的处理工作. 1. 首先,右键工程文件-->Properties -->settings-- ...
- 写好Hive 程序的若干优化技巧和实际案例
使用Hive可以高效而又快速地编写复杂的MapReduce查询逻辑.但是一个”好”的Hive程序需要对Hive运行机制有深入的了解,像理解mapreduce作业一样理解Hive QL才能写出正确.高效 ...
- SIFT中的尺度空间和传统图像金字塔
SIFT中的尺度空间和传统图像金字塔 http://www.zhizhihu.com/html/y2010/2146.html 最近自己混淆了好多概念,一边弄明白的同时,也做了一些记录,分享一下.最近 ...
- PCA降维
http://blog.csdn.net/a784763307/article/details/17289317 这篇比较棒 openCV版 void PrintMatrix(CvMat *Matri ...
- 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 ...
- MVC_Controller
准备工作 安装VS2010或更高版本 安装数据库2008或更高版本 视个人系统不同配置IIS本地服务 数据库和VS下载地址 http://msdn.itellyou.cn/ 本节目标 通过本节案例对M ...
- 如何查看Android的Keystore文件的SHA1值
像使用百度地图api时候,一般需要获取keystore的SHA1值,这里就手把手教大家如何查看Android的keystore文件中的SHA1值. 第一步: 打开cmd,切换到keystore所在的文 ...
- JDBC数据类型
JDBC数据类型 JDBC驱动程序Java数据类型转换到适当的JDBC类型然后再将它发送到数据库.它使用默认的大多数数据类型映射.例如,一个Java int转换成一个SQL INTEGER.创建默认映 ...
- Java虚拟机6:内存溢出和内存泄露、并行和并发、Minor GC和Full GC、Client模式和Server模式的区别
前言 之前的文章尤其是讲解GC的时候提到了很多的概念,比如内存溢出和内存泄露.并行与并发.Client模式和Server模式.Minor GC和Full GC,本文详细讲解下这些概念的区别. 内存溢出 ...