组件协同：

<!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. Creating Isomorphic Apps with Node.js, React, and Express

    In this article, we’re going to use following software: React: the UI framework that can rendered on ...

  2. 20155224 《实验二 Java面向对象程序设计》实验报告

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要求 没有Linux ...

  3. Drupal7 实现like(点赞)功能

    尝试了好几个模块做下总结: 1. Like Dislike Buttons 好处:代码实现简单,一看就懂,开启后无需任何配置,自动在node底部显示like和unlike的小手.而且模版改起来也容易. ...

  4. VS2008 "无法找到资源编译器dll 请确保路径正确"

    系统环境:windows 8.1 企业版 x64 (装有 .NET 2.0 / 3.5 / 4.0 /  4.5) 安装前确认系统已安装 .NET 2.0 / 3.5 .在安装时,最好是默认安装,并且 ...

  5. php 操作 oracle lob 数据

    http://www.oracle.com/technetwork/articles/fuecks-lobs-095315.html Working with LOBs in Oracle and P ...

  6. AtCoder Regular Contest 101 D - Median of Medians

    二分答案 然后前缀和+树状数组来判断这个答案是否大于等于数 如果我们对于一个查询,如果小于这个数令为1,大于这个数领为-1 将所有前缀和放在树状数组中,就可以查询所有sum_{l} < sum_ ...

  7. Codeforces Round #500 (Div. 2) D - Chemical table

    首先我们如果满足三缺一,那么必有同行和同列的点 如果两行有同列的数,我们可以设想,他们最后会全部填充成为两者啥都有的情况 显然这个是个并查集 现在我们有了很多集合,每个集合自己可以进行三缺一操作,但是 ...

  8. [寒假学习笔记]（一）Markdown语法学习

    Markdown 学习 在博客园上使用markdown编辑,记录学习进度,以来日可以复习 前期准备 1. 安装markdownpad2 官网直接找下载安装,遇到bug他会自动提示信息,跟着提示去安装一 ...

  9. eos合约案例导读

    为了帮助大家熟悉 EOS 智能合约,EOS 官方提供了一个代币(资产)智能合约 Demo -- eosio.token.eosio.token 智能合约目前还不是特别完善,个别功能还没有完成.但这个示 ...

  10. kylin-note

    http://www.cnblogs.com/tgzhu/category/915975.html https://sdk.cn/news/3566 https://www.linuxidc.com/ ...