好客租房33-事件绑定this指向(总结)
1推荐使用class的实例方法
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component {
//初始化state
state = {
geyao: 0,
}
constructor(){
super()
}
//抽离出来 this报错 事件处理中的this为underfine
handleNum=()=>{
this.setState({
geyao: this.state.geyao + 1,
})
}
render() {
return (
<div>
<h1>{this.state.geyao}</h1>
<button onClick={this.handleNum}>点击加一</button>
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
2箭头函数
<button onClick={()=>this.handleNum}>点击加一</button>
3bind函数
this.handleNum=this.handleNum.bind(this)
好客租房33-事件绑定this指向(总结)的更多相关文章
- 好客租房31-事件绑定this指向(bind)
事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react import React from 'react' ...
- 好客租房30-事件绑定this指向(箭头函数)
1箭头函数 利用箭头函数自身不绑定this的特点 //导入react import React from 'react' import ReactDOM from 'rea ...
- 好客租房32-事件绑定this指向(class实例方法)
class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' // ...
- 好客租房24-react中的事件处理(事件绑定)
3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react import React f ...
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- 事件绑定+call apply指向
JS高级 事件—— 浏览器客户端上客户触发的行为都称为事件 所有事件都是天生自带的,不需要我们去绑定,只需要我们去触发,通过obj.事件名=function(){ } 事件名:onmousemove: ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
随机推荐
- react 移动端 兼容性问题和一些小细节
react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对 ...
- Codepen 每日精选(2018-4-22)
按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以打开原始页面. 图片切换效果https://codepen.io/AlikinVV/f... 基于 dom 的可换肤的自行 ...
- EF框架基础
ORM概述: ORM全称是"对象 - 关系映射" . ORM是将关系数据库中的数据用对象的形式表现出来,并通过面向对象的方式将这些对象组织起来,实现系统业务逻辑的过程. Entit ...
- 界面跳转+信息传递+AS中如何将ADV转移到其他盘中
今日所学:界面跳转 信息传递 遇到的问题: 昨天遇到不能新建java类,在网上百度了很多,大多原因是没有新建java类的模板,但是我有,换了一个新的新建的方式后,发现虽然能建立了,但在测试时还是不能页 ...
- Hyperledger Fabric无排序组织以Raft共识算法启动多个Orderer服务、多组织共同运行维护Orderer服务
前言 在Hyperledger Fabric无系统通道启动及通道的创建和删除中,我们已经完成了以无系统通道的方式启动 Hyperledger Fabric 网络,并将链码安装到指定通道.但目前为止,实 ...
- 新手入门C语言第八章:C循环
一.C 循环 有的时候,我们可能需要多次执行同一块代码.一般情况下,语句是按顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推.编程语言提供了更为复杂执行路径的多种控制结构.循环语句允许 ...
- C#/VB.NET 将RTF转为HTML
RTF文档即富文本格式(Rich Text Format)的文档.我们在处理文件时,遇到需要对文档格式进行转换时,可以将RTF转为其他格式,如转为DOCX/DOC.PDF或者HTML,以满足程序设计需 ...
- Apache Doris 通过ODBC连接SQL Server
社区有小伙伴有使用Doris ODBC外表连接SQL Server数据库,使用中遇到不知道驱动怎么安装,苦于我这边也没有SQL Server的环境,正好社区有用户使用了这个数据库,也安装ODBC驱动测 ...
- 一文读懂原子操作、内存屏障、锁(偏向锁、轻量级锁、重量级锁、自旋锁)、Disruptor、Go Context之上半部分
我不想卷,我是被逼的 在做了几年前端之后,发现互联网行情比想象的差,不如赶紧学点后端知识,被裁之后也可接个私活不至于饿死.学习两周Go,如盲人摸象般不知重点,那么重点谁知道呢?肯定是使用Go的后端工程 ...
- js实现图片懒加载原理
原理 图片懒加载是前端页面优化的一种方式,在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来 ...