React实现双向绑定示例代码


Posted in Javascript onSeptember 19, 2016

前言

React.js现在已经很流行了,不会React.js都不好意思说自己会前端了。

那么下面就来看看关于React双向绑定的实现。

双向绑定的使用:

组件需要mixins:引用LinkedStateMixin。它提供一个linkState方法。

参数是state属性

双向绑定用valueLink={this.linkState(XX)}

linkState方法返回一个对象,有一个value属性,指定state的属性。

还有一个requestChange回调方法,用来实现state的修改。参数是新值

可以理解成onchange的绑定方法。可以自己写一个linkState对象,value是state.XX requestChange里用setState()来修改值。用valueLink={obj}来实现。

可以理解成this.linkState()实现的就是指定绑定值value 和change方法

valueLink属性实现了linkstate.value绑定到value requestChange方法绑定onChange

可以创建一个this.linkState('XX') value={XX.value} onchange={fn}方法内使用Xx.requestChange(e.target.value)

-------------------------

小结:linkState()方法提供state属性和change方法。valueLink={}来实现value 和change事件的绑定。

以下是实现代码

/*默认表单双向绑定
   * 给每个input绑定change事件来实现修改state
   * 如果标签多了一个个绑定肯定是不行的,
   * 所以react 给我个提示了reactLink来
   */
   var Box1=React.createClass({
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   handlNameChange:function(event){
    this.setState({name:event.target.value});
   },handlboolChange:function(event){
    this.setState({bool:event.target.checked})
   },
   render:function(){
    return (
    <div>
     <input type="text" value={this.state.name} onChange={this.handlNameChange}/>   <br/>
     <input type="checkbox" checked={this.state.bool} onChange={this.handlboolChange} />
    </div> 
    )
   }
   }) ;
   React.render(<Box1></Box1>,document.querySelector('#div1'));
   
   /*ReactLink仅是提供了onchange setState模式的简单包装和约定。是其的简写方式
   * 1、需要mixins添加引用
   * 2、原先的value绑定换成valueLink。参数从this.state.XX换成this.linkState('XX')这样就可以了
   */
   /*ReactLink解析
   * LinkedStateMixin给组件添加一个linkState方法,参数是state属性名。
   * 它返回一个reactlink对象,包含state当前值和一个改变值 的回调.
   * reactlink 可以在组件间通过props传递
   */
   var Box2=React.createClass({
   mixins:[React.addons.LinkedStateMixin],//添加引用
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   render:function(){//绑定时属性从value换成valueLink值需要用this.linkState方法调用
    return (
    <div>
     <input type="text" valueLink={this.linkState('name')} />   <br/>
     <input type="checkbox" checkedLink={this.linkState('bool')} />
    </div>   
    );
   }
   })
   React.render(<Box2></Box2>,document.querySelector('#div2'));
   
   /*底层原理
   * reactlink对象其实就一个value属性,和一个requestChange方法,value值 是state。方法实现修改state值
   * 
   */
   var Box3=React.createClass({
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   handlnamechange:function(val){
    this.setState({name:val})
   },
   handlboolchange:function(val){
    this.setState({bool:val})
   },
   render:function(){
    var reactlink={
    value:this.state.name,
    requestChange:this.handlnamechange
    }
    var reactlink2={
    value:this.state.bool,
    requestChange:this.handlboolchange
    }
     return(
      <div>
     <input type="text" valueLink={reactlink} />   <br/>
     <input type="checkbox" checkedLink={reactlink2} />
    </div> 
     )
   }
   });
   React.render(<Box3></Box3>,document.querySelector('#div3'));
   
   /*valuelink
   * 它实际上实现的是状态的绑定和change事件的修改
   * requestChange方法接收值来实现state的修改
   */
   var Box4=React.createClass({
   mixins:[React.addons.LinkedStateMixin],//添加引用
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   render:function(){
    var valuelink=this.linkState('name');
    var handlenamechange=function(e){
      valuelink.requestChange(e.target.value) 
    }
    var valuelink2=this.linkState('bool');
    var handlenboolchange=function(e){
      valuelink2.requestChange(e.target.checked) 
    }    
    return (
      <div>
     <input type="text" value={valuelink.value} onChange={handlenamechange} />   <br/>
     <input type="checkbox" checked={valuelink2.value} onChange={handlenboolchange} />
    </div> 
    )
   }
   });
   React.render(<Box4></Box4>,document.querySelector('#div4'));

------------------------ReactLink对象传递

可以向子组件传递:

linkname={this.linkState('name')}

子组件内可:

<input type="text" valueLink={this.props.linkname} >

通过props来引用并绑定到valueLink上。

也可以用this.props.linkname.requestChange()来用方法修改值 。

它们的变化 会同步到父组件的。并更新标签的。

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
微信JSSDK上传图片
Aug 23 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
Javascript中的async awai的用法
May 17 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue从使用到源码实现教程详解
Sep 19 #Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 #Javascript
jquery事件绑定解绑机制源码解析
Sep 19 #Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 #Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 #Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 #Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 #Javascript
You might like
php 获取远程网页内容的函数
2009/09/08 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
axios学习教程全攻略
2017/03/26 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
高二英语教学反思
2014/01/19 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
师德师风承诺书
2014/05/23 职场文书
小学运动会加油稿
2015/07/22 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Java8中Stream的一些神操作
2021/11/02 Java/Android
Java设计模式中的命令模式
2022/04/28 Java/Android
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android