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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
js微信分享API
Oct 11 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
vue的keep-alive用法技巧
Aug 15 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Django实现网页分页功能
2019/10/31 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
python中tab键是什么意思
2020/06/18 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
分享一个python的aes加密代码
2020/12/22 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
律政俏佳人观后感
2015/06/09 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL