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 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
node.js 动态执行脚本
Jun 02 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
无线电的诞生过程
2021/03/01 无线电
php4的session功能评述(二)
2006/10/09 PHP
PHP详细彻底学习Smarty
2008/03/27 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python 基础知识之字符串处理
2017/01/06 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python实现图片转字符小工具
2019/04/30 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
自荐信怎么写好
2013/11/11 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
python实现语音常用度量方法的代码详解
2021/05/25 Python