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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 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使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python实现ID3决策树算法
2018/08/29 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
大型车展策划方案
2014/02/01 职场文书
个人自荐材料
2014/05/23 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
借款民事起诉状范文
2015/05/19 职场文书
优秀志愿者感言
2015/08/01 职场文书
心理健康教育主题班会
2015/08/13 职场文书