好客租房30-事件绑定this指向(箭头函数)
1箭头函数
利用箭头函数自身不绑定this的特点
//导入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,
}
//抽离出来 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'))
好客租房30-事件绑定this指向(箭头函数)的更多相关文章
- 好客租房32-事件绑定this指向(class实例方法)
class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' // ...
- 好客租房33-事件绑定this指向(总结)
1推荐使用class的实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约 ...
- 好客租房31-事件绑定this指向(bind)
事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react import React from 'react' ...
- ES6 箭头函数 this 指向
ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...
- react事件绑定,事件传参,input单向数据绑定
import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...
- 普通函数跟箭头函数中this的指向问题
箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...
- ES6箭头函数this指向
普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'us ...
- JS五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)
目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
随机推荐
- 【每日日报】第十八天 ----java最全排序方法
1 今天看了Java的第三章 2 冒泡法排序: package Line; import java.util.Arrays; public class MaoPao { public static v ...
- MyEclipse如何刷新项目
第一种:选中项目,点右键Refresh即可, 第二种:选择project->clean,选中所要编译得项目,点ok即可
- 在Wireshrak中使用过滤器——捕获过滤器
过滤器可以让你找出你所希望进行分析的数据包.简单来说,一个过滤器就是定义了一定条件,用来包含或者排除数据包的表达式.如果你不希望看到一些数据包,你可以写一恶搞过滤器来屏蔽它们.如果你希望只看到某些数据 ...
- Masa Blazor in Blazor Day
2022年第一场Blazor中文社区的开发者分享活动,我们的团队也全程参与其中,在议程中,也分享了我们团队的Blazor 管理后台模板,针对于Blazor,先科普一波,避免有些朋友不了解,Blazor ...
- Shiro之权限管理的概念
文章目录 前言:什么是shiro 一.什么是权限管理? 举例 二.权限管理的具体分类 1.身份认证 2.授权 总结 前言:什么是shiro Apache Shiro 是一个开源安全框架,提供身份验证. ...
- Spring Framework 学习笔记——核心技术之Spring IOC
Spring Framework 官网文档学习笔记--核心技术之Spring IOC 官方文档 spring-framework-5.3.9 1. Spring Framework 核心技术 1.1 ...
- 使用ABP SignalR重构消息服务(二)
使用ABP SignalR重构消息服务(二) 上篇使用ABP SignalR重构消息服务(一)主要讲的是SignalR的基础知识和前端如何使用SignalR,这段时间也是落实方案设计.这篇我主要讲解S ...
- 2019-2020 10th BSUIR Open Programming Championship. Semifinal
2019-2020 10th BSUIR Open Programming Championship. Semifinal GYM链接https://codeforces.com/gym/103637 ...
- 企业DevOps之路:Jenkins 流水线
1. Pipeline 概述 Pipeline 即流水线,是 jenkins2.X 的新特性,是 jenkins 官方推荐使用的持续集成方案.与传统的自由风格项目不同,它是通过 jenkins DSL ...
- python基础练习题(题目 画菱形)
day15 --------------------------------------------------------------- 实例022:画菱形 题目 打印出如下图案(菱形):. * * ...