事件绑定中的this问题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数this问题</title>
</head>
<body>
<button id="btn">点我</button>
<script>var btn = document.getElementById('btn')const user = {name: 'Jack'}function handleClick(e) {console.log(this)}btn.onclick = handleClick
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>10-带有状态的组件.html</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">class MyComponent extends React.Component {constructor () {// 如果子类加入了 constructor 构造函数，则一定要手动调用父类的构造函数 supersuper()// React 组件需要通过手动为组件类添加 state 成员来初始化：ViewModel// state 等价于 Vue 中的 data// 接下来就可以在该组件管理的模板中通过 {} 来访问绑定数据了this.state = {message: 'Hello, MyComponent!'}}render () {return (<div><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1>{/** 事件绑定函数默认情况下内部的 this 指向 Window* 自动接收一个 event 事件源对象* 1. this 指向了 Window* 2. 只能得到 event 无法传参*/}<button onClick={this.handleClick}>点击改变 message</button>{/** bind 了 this 的函数调用的时候，好会给你传递一个 event 事件源对象* 内部的 this 就是你 bind 的那个参数* 1. 可以指定 this* 2. 支持传参数，参数在前，事件源对象在最后* 推荐这种方式*/}<button onClick={this.handleClick.bind(this, 123, 456)}>点击改变 message</button>{/** 当点击 onClick 的时候，调用绑定了 this 的箭头函数* 箭头函数内部的 this 是组件实例* 所以我可以直接在调用函数中再调用 this.handleClick() 函数*/}<button onClick={(e) => {this.handleClick(e, 123, 456)}}>点击改变 message</button></div>)}// 规范：处理事件方法都取名为 handlexxxhandleClick (num1, num2, e) {console.log(num1, num2, e)// console.log('handle click')// console.log(this) // 默认是 window// React 不是使用的类似于 Vue 中的 Object.defineProperty() 方式 get、set// this.state.message = 'hello world'// 现在只需要知道，如果要修改 state 中的数据并且希望得到视图更新，则一定要使用// this.setState 方法// this.setState({// message: 'hello world'// })}}const element = <MyComponent />ReactDOM.render(element, document.getElementById('app'))
</script>
</body>
</html>
事件绑定中的this问题相关推荐
- 再次强调事件绑定中this的坑
事件绑定中的 this 指向问题(坑) 第一种绑定方式(不做任何处理): this 指向 Window 默认接收一个参数 event 事件源对象 不支持额外的参数传递 <button onCli ...
- pdo 参数绑定中 where 子句中的错误的解决
pdo 参数绑定中 where 子句中的错误的解决 select * from admin where 1=1 and admin_name = '$user_name' 象这句是会出错的,说 ...
- Js事件绑定时，函数名加括号和不加括号有什么区别
Js事件绑定时,函数名加括号和不加括号有什么区别以window.onload为列 大致可以理解为一:不加括号时:=指向函数,触发事件时触发函数.window.οnlοad=aa;aa为一个函数等价于w ...
- 事件绑定在IE下this是window的问题
昨天写一个函数的时候,后来用了事件绑定,开始没在IE下测试,在chrome下都是没问题的.后来在IE下测试发现出错. 后来修改一下,发现oBox.οnclick=function(){}没问题,而ad ...
- WPF绑定中的OneWay和TwoWay区别和适用场景
BindingMode TwoWay 导致对源属性或目标属性的更改可自动更新对方.此绑定类型适用于可编辑窗体或其他完全交互式 UI 方案. OneWay 当绑定源(源)更改时,更新绑定目标(目标)属性 ...
- php steam 第三方登录,Steam第三方授权登录异常 《绝地求生》国服绑定中招
今日,Steam第三方授权登录发生异常,导致所有需要Steam账号绑定登录的网站都出现登录错误.小熊在尝试用Steam账号登陆SteamCN论坛时,也出现了登录错误的提示. 而目前,许多中招的网站都在 ...
- $.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
- jQuery 双击事件（dblclick）时，不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那 ...
- 事件（DOM事件绑定）
事件的定义 事件:元素天生具备的行为方式(和写不写JS代码没有关系)[onclick不是事件,click才是事件,浏览器会把一些常用事件挂载到元素对象的私有属性上,让我们可以实现DOM0事件绑定], ...
最新文章
- plotly基于dataframe数据绘制股票自定义K线图
- SDWebImage开源库阅读分析（全）
- flask + celery
- python主线程执行_python 并发执行之多线程
- 用ANSYS画矩形_钢轨打磨用复合砂轮磨削温度场的研究
- Yahoo Mail，慢功出细活〔转载〕
- idea本地跑如何看gc日志_线上故障如何快速排查？来看这套技巧大全
- linux下安装nginx1.10,Linux（RHEL7.0）下安装nginx-1.10.2(示例代码)
- linux 如何产生so文件,printf()函数 【转】Linux下gcc编译生成动态链接库*.so文件并调用它(2)...
- springboot对于redis的增删改查
- 用Typescript 开发 node.js (方法2)
- 通过释放cache内存解决ubuntu死机问题
- python简明教程_05
- 使用Lockdir软件加密解密文件夹
- 三星固态性能测试软件,三星850 EVO 120G固态硬盘评测——性能测试与保养
- poj-1069(三角形和六边形)（转）
- alot英文怎么读_漂亮的英文是什么英语怎么说
- 【网络】华为网络设备认证登录设置
- Chrome浏览器默认打开无痕模式
- java实现象棋ai_中国象棋AI实现?