详解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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
js 图片等比例缩放代码
May 13 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 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四大安全策略
2014/03/12 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
django中模板的html自动转意方法
2018/05/27 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Pandas中resample方法详解
2019/07/02 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
mysql序号rownum行号实现方式
2022/12/24 MySQL