一、组件

二、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>Mixin</title>

 </head>

 <body>

     <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         // var BindingExample = React.createClass({

         //     getInitialState: function() {

         //         return {

         //             text: ''

         //         }

         //     },

         //     handleChange: function(event) {

         //         this.setState({text: event.target.value})

         //     },

         //     render: function() {

         //         return <div>

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

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

         //         </div>

         //     }

         // })

         var BindingMixin = {

             handleChange: function(key) {

                 var that = this

                 var newState = {}

                 return function(event) {

                     newState[key] = event.target.value

                     that.setState(newState)

                 }

             }

         }

         var BindingExample = React.createClass({

             mixins: [React.addons.LinkedStateMixin],

             getInitialState: function() {

                 return {

                     text: '',

                     comment: '',

                 }

             },

             render: function() {

                 return <div>

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

                     <textarea valueLink={this.linkState('comment')}></textarea>

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

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

                 </div>

             }

         })

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

     </script>

 </body>

 </html>

React组件-mixin的更多相关文章

  1. React组件属性部类（propTypes）校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  2. react组件什么周期记录，转的

    react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数,理解生命周期函数,对写出合理的commponet很有帮助.下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题. ...

  3. 总结 React 组件的三种写法 及最佳实践 [涨经验]

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  4. React组件和生命周期简介

        React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...

  5. React组件性能调优

    React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...

  6. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  7. React 组件开发注意事项

    0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...

  8. 总结 React 组件的三种写法 及最佳实践

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...

  9. React组件的防呆机制（propTypes）

    Prop验证 随着应用不断变大,为了保证组件被正确使用变得越来越重要.为此我们引入propsTypes.React.PropTypes提供很多验证器(valodator)来验证传入的数据的有效性.当向 ...

随机推荐

  1. c# 各种排序算法+找第二大的数+句子单词反转

    冒泡排序 // 冒泡排序 bubble sort public static int[] BubbleSort(int []array) { bool isContinue = true; ; i & ...

  2. C++设计模式——享元模式

    本文版权归果冻说所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.如果这篇文章对你有帮助,你可以请我喝杯咖啡. » 本文链接:http:// ...

  3. XAML中的Path

    利用Path创建图形的时候,如果path对象的Fill属性不设置,那么绘制出来的图形首尾是不连接的. 如果设置了Fill属性,当Fill的Color属性为Transparent时,图形也不会首尾连接: ...

  4. SFI（段文件描述符存在的理由与意义）

    SFI:short file identifier,短文件描述符 SFI的取值必须在0001-001E之间,即0-30 SFI存在的理由:有些COS命令可以不需要事先选择文件而直接通过SFI快速访问文 ...

  5. windows多线程编程（一）（转）

    源出处:http://www.cnblogs.com/TenosDoIt/archive/2013/04/15/3022036.html CreateThread:Windows的API函数(SDK函 ...

  6. 20145129 《Java程序设计》第4周学习总结

    20145129 <Java程序设计>第4周学习总结 教材学习内容总结 继承与多肽 继承共同行为 继承是避免多个类间重复定义共同行为.(将相同的代码提升为父类) 关键字extends:表示 ...

  7. Git学习小结(第三次作业)

    本文主要总结一下在学习和使用git中一些用到的命令. 参考教程:廖雪峰git教程 在windows上安装git 下载使用环境:http://msysgit.github.io/, 安装一路默认即可. ...

  8. Netsharp快速入门(之3) 基础档案(之B 实体建模 新建项目)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 3.3     创建业务模型 3.3.1  新建项目 1.打开业务模型 2.打开业务模型后,在工具栏上选择操作-新增项目分类,标识这 ...

  9. 我是IT小小鸟，老师我之前上传了！！！！老是请您看到我

    我是IT小小鸟读后感 世界上没有一蹴而就的成功者,只有头悬梁锥刺股的奋斗者.蜉蝣向往大鹏的辉煌,却不曾知大鹏以往的汗水.蜉蝣之所以为蜉蝣,是因为它犹如井底之蛙,目光短浅,之盲目地羡慕成功者,而大鹏之所 ...

  10. CSS中的视觉格式化模型

    视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树 ...