我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理。

节点上使用bind绑定

特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性能。不符合表象与行为分离准则

它属于ES5函数扩展的方法Function.prototype.bind(thisArg [, arg1 [, arg2, …]]),bind()返回一个新的函数对象,该函数的this被绑定到thisArg上,并向事件处理器中传入参数。

 class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={this.handleClick.bind(this, 'Jake')}>事件点击</h3>
</header>
</div>
);
}
handleClick(name, event) {
console.log(this)
console.log('事件', event)
console.log('参数', name)
}
}

这里需要注意的是,this必须放在其他实参最前面, 形参event必须放在其他参数后面,并且调用函数时无需传入event对象

构造函数中使用bind绑定

特点:该方式是将bind从节点移到构造函数上, 组件渲染时不会重新绑定。不会造成额外性能损耗

 class App extends Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this, 'Jake')
}
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={this.handleClick}>事件点击</h3>
</header>
</div>
);
}
handleClick(name, event) {
console.log(this)
console.log('事件', event)
console.log('参数', name)
}
}

箭头函数上绑定

特点:该方法分为两种ES6和ES7语法, 利用了箭头函数自动绑定this作用域的特性

 class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={(e) => {this.handleClick('ketty', e) }} >事件点击</h3>
</header>
</div>
);
}
handleClick(name, event) {
console.log(this)
console.log('事件', event)
console.log('参数', name)
}
}

注意,该方法调用时必须传实参event才能获取event对象,并且它要在其他实参后面传入

(e) => {this.handleClick('ketty', e) }

不过该方法有个问题,就是匿名函数,无法移除监听事件,则需要改用ES7语法糖方式

 class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
hello world
<h3 onClick={this.handleClick} >事件点击</h3>
</header>
</div>
);
}
handleClick = (event) => {
console.log(this)
console.log('事件', event)
}
}

但此时,没法在调用函数时传入实参

而且该语法糖,在create-react-app上默认支持,如自定义脚手架,则需要安装babel-plugin-transform-class-properties插件解析ES7语法糖

以上三种方法各有特点,需根据实际情况而使用。

React组件绑定this的三种方法的更多相关文章

  1. 在React中跨组件分发状态的三种方法

    在React中跨组件分发状态的三种方法 当我问自己第一百次时,我正在研究一个典型的CRUD屏幕:"我应该将状态保留在这个组件中还是将其移动到父组件?". 如果需要对子组件的状态进行 ...

  2. React组件绑定this的四种方式

    题图 By HymChu From lnstagram 用react进行开发组件时,我们需要关注一下组件内部方法this的指向,react定义组件的方式有两种,一种为函数组件,一种为类组件,类组件内部 ...

  3. WPF的DataGrid的某个列绑定数据的三种方法(Binding、Converter、DataTrigger)

    最近在使用WPF的时候,遇到某个列的值需要根据内容不同进行转换显示的需求.尝试了一下,大概有三种方式可以实现: 1.传统的Binding方法,后台构造好数据,绑定就行. 2.转换器方法(Convert ...

  4. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  5. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  6. React绑定this的三种方式

    React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方法的this到当前组件,但使用ES6 cla ...

  7. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  8. 数据绑定(三)为Binding指定绑定源的几种方法

    原文:数据绑定(三)为Binding指定绑定源的几种方法 Binding的源是数据的来源,所以,只要一个对象包含数据并能通过属性把数据暴露出来,它就能当作Binding的源来使用,常用的办法有: 一. ...

  9. OC和JS交互的三种方法

    看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...

随机推荐

  1. 想对list里面的对象进行排序

    不必使用排序算法.实现Comparator接口就行

  2. 2017-10-22—LD激光二极管原理

    直接摘抄百科了: 在讲激光产生机理之前,先讲一下受激辐射.在光辐射中存在三种辐射过程, 一是处于高能态的粒子自发向低能态跃迁,称之为自发辐射; 二是处于高能态的粒子在外来光的激发下向低能态跃迁,称之为 ...

  3. [HDU4669]Editor (栈)

    题意 模拟编辑器,还是给链接吧 https://vjudge.net/problem/HDU-4699 思路 两个栈 代码 //poj1050 //n^4暴力 #include<algorith ...

  4. Egret的Shape

    class ShapeTest extends egret.DisplayObjectContainer { public constructor() { super(); this.addEvent ...

  5. MVC中EF代码优先问题

    在练习Mvc项目时,提示如下数据库错误: The model backing the 'EFDbContext' context has changed since the database was ...

  6. wamp 环境安装php_mongo 或 mongodb的扩展

    特别注意:momgo 与mondb 是两个不同的扩展,不是同一个,这是一个坑 1.查看你的php版本,Compiler,Thread safety版本 2.下载地址 https://pecl.php. ...

  7. js高级4

    1.Date  类 getDate()返回一个月中的某一天 1-31 getDay() 返回一周中的某一天0-6 getFullyear()返回四位数的年份 getMonth()返回月份 比实际情况小 ...

  8. 选择性计量学(Altmetric)介绍

    不论是对科研人员还是对机构知识库管理者来说,对文章或期刊使用定量数据来评价都是很有意义的.比如,科研人员或论文的作者可以通过这些数据来了解该学科的基本情况,也可以为其个人总结或个人简历补充更为精细.更 ...

  9. 【蓝桥杯真题】地宫取宝(搜索->记忆化搜索详解)

    链接 [蓝桥杯][2014年第五届真题]地宫取宝 题目描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角,出口在右下角. 小明被 ...

  10. js, Date.parse firefox 兼容

    Date.parse(dateVal); 这个方法很常用,parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数. 可以验证输入日期是否窜在,不存在则返回N ...