详解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操作JSON的要领总结
Dec 09 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python 生成图形验证码的方法示例
2018/11/11 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python接收手机短信的代码整理
2020/08/02 Python
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
如何保障Web服务器安全
2014/05/05 面试题
电焊工工作岗位职责
2014/02/06 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
五好关工委申报材料
2014/05/31 职场文书
班主任高考寄语
2015/02/26 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸