React利用插件和不用插件实现双向绑定的方法详解


Posted in Javascript onJuly 03, 2017

前言

以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式。

有2种方式分析,1:不用插件,2:用插件

(引入react.js操作省略。。。)

不用插件:

先创建react组件

var NoLink = React.createClass({});

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

组件创建好了,需要一个初始化变量,来公用显示输入的数据

var NoLink = React.createClass({
 getInitialState:function(){
  return {message:''}
 }
});

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

message初始值为空,这是正常项目环境可以这样设置。下面我想用一个input输入框 和一个b标签实现双向绑定的效果,render所需要的html标签

var NoLink = React.createClass({
 getInitialState:function(){
  return {message:''}
 },
 render:function(){
  var mess = this.state.message;
  return (
   <div>
    <input type="text" onChange={this.handelChange} value={mess} />
    <b>{mess}</b>
   </div>
  )
 }
});
React.render(<NoLink />,document.body);

在上面代码中 可以清晰的 看出返回的组件元素,其中在input输入框中加了一个onChange操作,这个处理当我们输入内容的时候,怎么让输入的内容同时展示在b标签中;在react操作中其实很简单。

var NoLink = React.createClass({
 getInitialState:function(){
  return {message:''}
 },
 handelChange:function(event){
  console.log(event.target);
  this.setState({message:event.target.value})
 },
 render:function(){
  var mess = this.state.message;
  return (
   <div>
    <input type="text" onChange={this.handelChange} value={mess} />
    <b>{mess}</b>
   </div>
  )
 }
});

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

onChange直接调用handelChange函数,在这只要处理对初始化变量message的重新赋值就可以了,在react中获取初始值 直接用“this.state.初始值",如果想设置初始值直接用"this.setState({初始值:新值}) ",这个点先理清楚了我需要设置初始值,然后呢

我的输入值怎么直接管理到setState中去,当我onChange={this.handelChange}时候就开始应用handelChange函数了在这里通过event.target可以直接获取当前dom元素对象,因为我在这里用input,获取其值的方式".value"就可以了。

我在render的时候定义了mess变量来存放初始化message的值,这个js写法,懂得js性能的人一看就明白了,不多说。看下在浏览器的操作:

React利用插件和不用插件实现双向绑定的方法详解

接下来换种方式:用插件形式

用插件:

react.js给我们提供了linkState函数,但这个函数来自于React.addons.LinkedStateMixin,首先看下源码的操作,先进入React.addons.js中去找LinkedStateMixin

React利用插件和不用插件实现双向绑定的方法详解

这里几个对象就是这个addons.js中提供的所有操作,有重要的react动画插件CSSTransitionGroup包含其中。接下来我们这次需要linkedStateMixin所以走到这个对象中去看看:

React利用插件和不用插件实现双向绑定的方法详解

在这里只提供了linkState函数,直接返回一个ReactLink对象,把参数直接给ReactLink对象去做处理。

主要这个东西怎么用在实例中,先创建一个react组件

var ReactLink = React.createClass({});


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

接下来思考,在这个组件中我们怎么引入外面对象,react.js提供了一个mixins的函数,要是引用对象多了直接以数组形式展现;其源码如图

React利用插件和不用插件实现双向绑定的方法详解

在组件中直接这样使用即可:

var ReactLink = React.createClass({
 //引用公共插件linkedStateMixin
 mixins:[React.addons.LinkedStateMixin]
});


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

linkedStateMixin是拿到了,现在我们要做的是怎么在定义的vdom上使用,在源码中我看到this.props.valueLink  这样的形式,说明在虚拟dom元素中加入valueLink才能使用,

var ReactLink = React.createClass({
 //引用公共插件linkedStateMixin
 mixins:[React.addons.LinkedStateMixin],
 getInitialState:function(){
  return {message:''}
 },
 render:function(){
  return (
    <div>
     <input type="text" valueLink = {this.linkState('message')}/>
     <b>{this.state.message}</b>
    </div>
  )
 }
});


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

上面的写法也是最简洁的写法,直接将初始化变量message传给linkState函数中去,然后react插件源码先获取的虚拟dom中的valueLink属性再进行操作。

用这样形式写好了 试一下效果:

React利用插件和不用插件实现双向绑定的方法详解

完全OK.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 #Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 #Javascript
微信小程序开发中的疑问解答汇总
Jul 03 #Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 #Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
javascript 闭包疑问
2010/12/30 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
jquery实现左右轮播切换效果
2018/01/01 jQuery
在vue组件中使用axios的方法
2018/03/16 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python实现查找所有程序的安装信息
2020/02/18 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
应届护士求职信范文
2014/01/26 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2015年推普周活动方案
2015/05/06 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
优秀大学生申请书
2019/06/24 职场文书
担保书范文
2019/07/09 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python