好客租房32-事件绑定this指向(class实例方法)
class实例方法
利用箭头函数的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>
)
}
}
好客租房32-事件绑定this指向(class实例方法)的更多相关文章
- 好客租房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 ...
- 好客租房33-事件绑定this指向(总结)
1推荐使用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对 ...
随机推荐
- 《CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化
本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS ...
- 报错需要选择一个空目录,或者选择的非空目录下存在 app.json 或者 project.config.json解决方案
前言 小程序的第一个坑就是,创建了一个小程序项目,却在微信web开发者工具无法打开... 报了个错:需要选择一个空目录,或者选择的非空目录下存在 app.json 或者 project.config. ...
- 前端每日实战:96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 此视频是可 ...
- 【Android开发】简单好用的阴影库 ShadowLayout
先来看一张使用 ShadowLayout 库实现的各种阴影的效果图,如下图所示: 如上图所示,通过使用 ShadowLayout 可以控制阴影的颜色.范围.显示边界(上下左右四个边界).x 轴和 y ...
- SpringBoot快速入门(解析+入门案例源码实现)
这里写目录标题 SpringBoot入门 一.SpringBoot 概念 二.JavaConfig 入门 1. JavaConfig 概念 2. 项目准备 三.常用注解 四.SpringBoot 入门 ...
- Jar 包下载以及 maven jar 包配置
学习内容: jar包下载是我们必须掌握的一个内容,不管是使用Maven项目还是其他项目,一般都需要引入外部的 jar 包 jar包下载 下载地址(打不开网址的直接百度搜索 maven reposito ...
- WebSocket学习笔记
参考文章链接:http://www.ruanyifeng.com/blog/2017/05/websocket.html 简单示例:https://www.yiibai.com/websocket/p ...
- Druid 1.1.24 在控制台打印"discard long time none received connection. , jdbcUrl : jdbc:mysql://...."错误日志
Druid 1.1.24 在控制台打印"discard long time none received connection. , jdbcUrl : jdbc:mysql://...&qu ...
- 无需debug,通过抽象模型快速梳理代码核心流程
上一篇我们通过DSM来确定了核心对象并构建了抽象模型.本篇是<如何高效阅读源码>专题的第八篇,我们来基于抽象模型来梳理核心流程. 本节主要内容: 如何通过抽象模型来梳理核心流程 从类名和注 ...
- MPU9250/MPU6050与运动数据处理与卡尔曼滤波(1)
第一篇--概述和MPU6050及其自带的DMP输出四元数 概述 InvenSense(国内一般译为应美盛)公司产的数字运动传感器在国内非常流行,我用过它的两款,9250和6050.出于被国产芯片惯坏的 ...