再次强调事件绑定中this的坑

事件绑定中的 this 指向问题（坑）

第一种绑定方式（不做任何处理）：

this 指向 Window
默认接收一个参数 event 事件源对象
不支持额外的参数传递

<button onClick={this.handleClick}>点击改变 message</button>

第二种方式（bind）：

this 指向组件实例
默认接收一个参数 event

<button onClick={this.handleClick.bind(this)}>点击改变 message</button>

第二种方式还可以为方法传递额外参数：

手动传递的参数会放到函数最前面，event 会作为函数的最后一个参数

<button onClick={this.handleClick.bind(this, 123, 456)}>点击改变 message</button>

第三种方式（箭头函数）：

自动 bind this
手动传递参数
参数顺序自己指定，event 也需要自己手动传递

<button onClick={(e) => {this.handleClick(e, 123, 456)}}>点击改变 message</button>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>bind 函数</title>
</head>
<body><script>function fn(a, b, c, d, e, f) {console.log(a, b, c) // 1, 2, 3console.log(d, e, f) // 4, 5, 6}// 绑定的同时传递参数：预传参，不调用// 预置参数var newFn = fn.bind(this, 1, 2, 3)// 调用的时候传递参数，该参数会和预传递的参数合并到一起作为函数参数newFn(4, 5, 6)// fn(4, 5, 6)</script>
</body>
</html>

再次强调事件绑定中this的坑相关推荐

事件绑定中的this问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
pdo 参数绑定中 where 子句中的错误的解决
pdo 参数绑定中 where 子句中的错误的解决 select * from admin where 1=1 and admin_name = '$user_name' 象这句是会出错的,说 ...
撸啊撸，再次撸HashMap源码，踩坑源码中构造方法！！！每次都有收获
前言点赞在看,养成习惯. 点赞收藏,人生辉煌. 点击关注[微信搜索公众号:编程背锅侠],第一时间获得最新文章. HashMap系列文章第一篇 HashMap源码中的成员变量你还不懂? 来来来!!! ...
Js事件绑定时，函数名加括号和不加括号有什么区别
Js事件绑定时,函数名加括号和不加括号有什么区别以window.onload为列大致可以理解为一:不加括号时:=指向函数,触发事件时触发函数.window.οnlοad=aa;aa为一个函数等价于w ...
关于Openlayers Overlay事件监听的一个坑
一.问题产生: 我使用Overlay创建标绘操作的小方块元素,如下代码和如图. 然后我监听小方块的mousedown事件.用原始的事件监听: element.addEventListener('mou ...
uniapp 账号登陆，账号绑定/解绑流程，躺坑
第一次开发uniapp微信小程序,记录一下开发中遇到的流程以及坑账号登陆 1.uni.login 获取code,在调用接口传入code获取uKey 绑定账号/解绑 1.uni.login获取code ...
JS鼠标事件onMouseOver和onMouseOut的坑
在React中监听鼠标点击事件,UI如下,左右有padding. 然后鼠标从左往右慢慢滑入HOMR再滑出. UI代码: 事件绑定在外层父元素上. 事件触发顺序如下. 1 鼠标只碰触父元素padding ...
事件绑定在IE下this是window的问题
昨天写一个函数的时候,后来用了事件绑定,开始没在IE下测试,在chrome下都是没问题的.后来在IE下测试发现出错. 后来修改一下,发现oBox.οnclick=function(){}没问题,而ad ...
h5 监听浏览器被切换到后台或者手机锁屏再次唤起事件
H5有一个事件叫 visibilitychange ,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,代码如下: document.addEventListener("v ...

再次强调事件绑定中this的坑

事件绑定中的 this 指向问题（坑）

再次强调事件绑定中this的坑相关推荐

最新文章

热门文章