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 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
js实现登录时记住密码的方法分析
Apr 05 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
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 Directory 函数的详解
2013/03/07 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
js html实现计算器功能
2018/11/13 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
Python实现字符串匹配算法代码示例
2017/12/05 Python
通过Pandas读取大文件的实例
2018/06/07 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
PyQt5实现简易计算器
2020/05/30 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python初学者常见错误详解
2019/07/02 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
《小动物过冬》教学反思
2014/04/17 职场文书
影视广告专业求职信
2014/09/02 职场文书
孔子观后感
2015/06/08 职场文书
赞美教师的句子
2019/09/02 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript