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学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 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/04 无线电
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
行政主管岗位职责
2013/11/18 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
技校毕业生自荐书
2014/05/23 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
辛亥革命观后感
2015/06/02 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
Python加密技术之RSA加密解密的实现
2022/04/08 Python