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 ...
随机推荐
- python+selenium+Robot
准备工作: 1.下载python2.7 http://python.org/getit/ 2.下载下载setuptools [python 的基础包工具] 可以帮助我们轻松的下载,构建,安装,升级,卸 ...
- Cocostudio 文章列表
Cocostudio 文章列表 Cocostudio(1) 容器层的使用- ScrollView ListView PageViewhttp://www.cnblogs.com/TS-qrt/arti ...
- AppFuse3.5对接oracle数据库
AppFuse是一个使用Java语言开发web应用系统的集成框架.java开发人员最头痛的事情就是面对大量的框架不知该如何选择.这些框架性能如何,兼容性如何等等都需要筛选比较.Appfuse作者Mat ...
- JavaScript标准库之 - Math
属性 Math.E 欧拉常数,也是自然对数的底数, 约等于 2.718. Math.LN2 2的自然对数, 约等于0.693. Math.LN10 10的自然对数, 约等于 2.303. Math.L ...
- 积木大赛 noip2013提高组day2
这道题一开始想到处理中间是0的位置,但这样时间太慢了,后来想到一种类似二分的方法,就是把这一段的最小值找到,全部减去最小值,然后有0一出现,就又递归处理前一段,每次答案就加上这一段的最小值: AC代码 ...
- Individual Project - Word frequency program - Multi Thread And Optimization
作业说明详见:http://www.cnblogs.com/jiel/p/3978727.html 一.开始写代码前的规划: 1.尝试用C#来写,之前没有学过C#,所以打算先花1天的时间学习C# 2. ...
- Export GridView Data to Excel. 从GridView导出数据到Excel的奇怪问题解析
GridView导出函数内容如下 string attachment = "attachment; filename=Contacts.xls"; Respo ...
- wrHDL编译中软核代码初始化及编译耗时长的问题
问题的提出整个WR的ISE工程比较大,编译时间很长,导致开发效率低.通过分析发现,ISE在综合的时候大量的时间都花在了初始化DPRAM上.调研发现Xilinx提供了BMM文件和DATA2MEM工具,可 ...
- Oracle的update语句优化研究
最近研究sql优化,以下文章转自互联网: 1. 语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...
- 让.NET xml序列化支持Nullable
.NET的序列化,关于契约类的生成我们都是通过xsd.exe,对于值类型的可空判断是通过声明同名+Specified的bool属性来判断,比如: public class Person { publi ...