详解react关于事件绑定this的四种方式


Posted in Javascript onMarch 09, 2018

在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化。在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定

React事件绑定类似于DOM事件绑定,区别如下:

1.React事件的用驼峰法命名,DOM事件事件命名是小写

2.通过jsx,传递一个函数作为event handler,而不是一个字符串。

3.React事件不能通过返回false来阻止默认事件,需要显式调用preventDefault()

如下实例:

<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>

class ActionLink extends React.Component {
constructor(props) {
super(props);
}

handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}

}

ps:React组件类的方法没有默认绑定this到组件实例,需要手动绑定。

以下是几种绑定的方法:

bind方法

直接绑定是bind(this)来绑定,但是这样带来的问题是每一次渲染是都会重新绑定一次bind;

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={this.del.bind(this)}></span>
   </div>
  );
 }
}

构造函数内绑定

在构造函数 constructor 内绑定this,好处是仅需要绑定一次,避免每次渲染时都要重新绑定,函数在别处复用时也无需再次绑定

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
  this.del=this.del.bind(this)
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={this.del}></span>
   </div>
  );
 }
}

::不能传参

如果不传参数使用双冒号也是可以

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={::this.del}></span>
   </div>
  );
 }
}

箭头函数绑定

箭头函数不仅是函数的'语法糖',它还自动绑定了定义此函数作用域的this,因为我们不需要再对它们进行bind方法:

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };

 }

 del=()=>{
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={this.del}></span>
   </div>
  );
 }
}

以上几种方法都可以实现this绑定,使用那种各自的习惯;希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
vue + vuex todolist的实现示例代码
Mar 09 #Javascript
vue实现在表格里,取每行的id的方法
Mar 09 #Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 #Javascript
vue的安装及element组件的安装方法
Mar 09 #Javascript
11行JS代码制作二维码生成功能
Mar 09 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python中list查询及所需时间计算操作示例
2018/06/21 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python数组循环处理方法
2019/08/26 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
建设投标担保书
2014/05/13 职场文书
2014年度培训工作总结
2014/11/27 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书