好客租房31-事件绑定this指向(bind)
事件this指向bind
利用ES5中bind方法 将事件处理程序中的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,
}
constructor(){
super()
this.handleNum=this.handleNum.bind(this)
}
//抽离出来 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'))
好客租房31-事件绑定this指向(bind)的更多相关文章
- 好客租房33-事件绑定this指向(总结)
1推荐使用class的实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约 ...
- 好客租房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' // ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- jQuery事件绑定—on()、bind()与delegate()
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制
1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...
- 关于JavaScript的事件绑定
js事件绑定的几种方式 JavaScript中有三种常用的绑定事件方法: 1. 在DOM元素中直接绑定: 2. 在JavaScript代码中绑定: 3. 绑定事件佳妮婷函数. 一.在DOM元素中直接绑 ...
随机推荐
- (stm32f103学习总结)—stm32定时器中断
一.定时器介绍 STM32F1的定时器非常多,由2个基本定时器(TIM6.TIM7).4个通 用定时器(TIM2-TIM5)和2个高级定时器(TIM1.TIM8)组成.基本定 时器的功能最为简单,类似 ...
- 如何解决Visual Studio 2017 运行后控制台窗口一闪就消失了
出现这种情况的原因 安装使用Visual Studio 2017 后,用Ctrl+F5运行程序,结果控制台窗口一闪就没了,也没有出现"press any key to continue-&q ...
- putty 远程登录ubuntu的方法
首先,要确定linux的ssh服务已经开启了: 首先要确定开启了ssh-server: 安装:sudo apt-get install openssh-server 安装:su ...
- React+dva+webpack+antd-mobile 实战分享(二)
第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现 导航 废话不说啦 下面直接给大家讲 ...
- python爬虫---虎牙直播封面采集
代码: import requests from lxml import etree # html解析库 source = requests.get("https://www.huya.co ...
- PYthon窗口学习之用异步请求解决Treeview列表插入大量数据反应慢的解决办法
当列表插入大量数据时,经常会等一会才显示数据 异步请求就将每一个插入语句并发运行,从而提高插入速度 代码: # 显示结果 def insert_result(table, info): def ins ...
- uniapp中websokcet封装和使用
1. websocket.js 封装代码 //是否已经连接上ws let isOpenSocket = false //心跳间隔,单位毫秒 let heartBeatDelay = 3000 l ...
- 手写封装防抖debounce
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- npx和npm的区别
npx 是 npm 的高级版本,npx 具有更强大的功能. 用途: 在项目中直接运行指令,直接运行node_modules中的某个指令,不需要输入文件路径 node-modules/.bin/babe ...
- Python中用类实现对象和封装
""" 用类实现对象和封装 对象:对应客观世界的事物,将描述事物的一组数据和与这组数据有关的操作封装在一起, 形成一个实体,这个实体就是对象 类:具有相同或相似性质的对象 ...