组件协同：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>父子关系</title>

</head>

<body>

<script src="react.js"></script>

<script src="JSXTransformer.js"></script>

<script type="text/jsx">

    var GenderSelect = React.createClass({

        render: function() {

            return <select onChange={this.props.handleSelect}>

                <option value="0">男</option>

                <option value="1">女</option>

            </select>

        }

    });

    var SignUpForm = React.createClass({

        getInitialState:function(){

            return {

                name:"",

                password:"",

                gender:""

            }

        },

        handleChange:function(name,event){

            var newState = {};

            newState[name] = event.target.value;

            this.setState(newState);

        },

        handleSelect: function (event) {

            this.setState({gender: event.target.value})

        },

        render: function () {

            console.log(this.state);

            return <form>

                <input type="text" placeholder="请输入用户名" onChange = {this.handleChange.bind(this,'name')}/>

                <input type="password" placeholder="请输入密码" onChange = {this.handleChange.bind(this,'password')}/>

                <GenderSelect handleSelect={this.handleSelect}></GenderSelect>

            </form>

        }

    });

    React.render(<SignUpForm></SignUpForm>,document.body);

</script>

</body>

</html>

mixin：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Mixin</title>

</head>

<body>

<script src="react.js"></script>

<script src="JSXTransformer.js"></script>

<script type="text/jsx">

    var BindingMixIn = {

        handleChange: function (key) {

            var that = this;

            return function(event){

                var newState = {};

                newState[key] = event.target.value;

                that.setState(newState);

            }

        }

    };

    var BindingExample = React.createClass({

        mixins:[BindingMixIn],

        getInitialState: function () {

            return {

                text: '',

                comment:''

            }

        },

        render: function () {

            return <div>

                <input type="text" placeholder="请输入内容" onChange={this.handleChange('text')}/>

                <textarea placeholder="请输入内容" onChange={this.handleChange('comment')}></textarea>

                <p>{this.state.text}</p>

                <p>{this.state.comment}</p>

            </div>

        }

    })

    React.render(<BindingExample></BindingExample>, document.body)

</script>

</body>

</html>

React.js学习笔记（一）：组件协同与mixin的更多相关文章

  1. React.js 学习笔记

    React.js React.js 是时下最流行的前端 JavaScript 框架之一. 创建工程 # 安装 CLI $ npm install -g create-react-app # 创建新的应 ...

  2. Vue.js学习笔记--4. 组件的基本使用

    整理自官网教程 -- https://cn.vuejs.org/ 1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下. <div id="app" ...

  3. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  4. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  5. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  6. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  7. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  8. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  9. Node.js学习笔记（3）：NPM简明教程

    Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...

随机推荐

  1. 20155217 2016-2017-2 《Java程序设计》第2周学习总结

    20155217 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 Java中的基本类型主要可分为整数.字节.浮点数.字符与布尔. 整数可分为short整数(占 ...

  2. 20155332 实验二 Java面向对象程序设计

    目录 一.单元测试和TDD 任务一:实现百分制成绩转成"优.良.中.及格.不及格"五级制成绩的功能 任务二:以TDD的方式研究学习StringBuffer 二.面向对象三要素:封装 ...

  3. [2016北京集训测试赛3]masodik-[凸包]

    Description Soluton 666这道题竟然用凸包... 维护r和c的下凸壳.哪个斜率大走哪个. 证明:我们先不考虑其他的,只考虑两条路,如下图: 设图的长度为x,宽度为y.如果我们要走上 ...

  4. 【LG2183】[国家集训队]礼物

    [LG2183][国家集训队]礼物 题面 洛谷 题解 插曲:不知道为什么,一看到这个题目,我就想到了这个人... 如果不是有\(exLucas\),这题就是\(sb\)题... 首先,若\(\sum_ ...

  5. 最优布线问题(wire.cpp)

    最优布线问题(wire.cpp) [问题描述] 学校有n台计算机,为了方便数据传输,现要将它们用数据线连接起来.两台计算机被连接是指它们间有数据线连接.由于计算机所处的位置不同,因此不同的两台计算机的 ...

  6. UTC时间转为正常日期

    SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'", Locale.US);SimpleDa ...

  7. 解决windows 服务中定时器timer 定时偶尔失效 问题

    最近做个windows 服务,功能是:定时执行一个任务:自动登录到一个网站后,点击相关网面上的按钮button. 在处理的过程中发现定时器老是不定时的失效,失效时间没有规律. 由于刚开始处于测试阶段, ...

  8. linux下汇编语言开发总结

    汇编语言是直接对应系统指令集的低级语言,在语言越来越抽象的今天,汇编语言并不像高级语言那样使用广泛,仅仅在驱动程序,嵌入式系统等对性能要求苛刻的领域才能见到它们的身影.但是这并不表示汇编语言就已经没有 ...

  9. 随身Wifi+win7 搭建http代理 域名劫持 抓包 内容篡改实验环境

    需求来源: 1.平板或手机是个封闭系统无法给wifi设置代理 2.需要利用filllder进行抓包,内容篡改等实验 拥有硬件资源:PC机器 + 小米随身wifi 方案1: NtBind Dns + N ...

  10. Delphi 中的 RectTracker - 原创

    本文算是副产品,正品是利用 FFmpeg 从任意视频中生成GIF片段的小程序,写完了就发. V2G 正品已出炉,虽然不大像样,但好歹是能用,请见:用 Delphi 7 实现基于 FFMS2 的视频转 ...