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实例方法)的更多相关文章

  1. 好客租房31-事件绑定this指向(bind)

    事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react     import React from 'react'           ...

  2. 好客租房30-事件绑定this指向(箭头函数)

    1箭头函数 利用箭头函数自身不绑定this的特点 //导入react     import React from 'react'           import ReactDOM from 'rea ...

  3. 好客租房33-事件绑定this指向(总结)

    1推荐使用class的实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' //导入组件   // 约 ...

  4. 好客租房24-react中的事件处理(事件绑定)

    3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react     import React f ...

  5. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  6. 事件绑定+call apply指向

    JS高级 事件—— 浏览器客户端上客户触发的行为都称为事件 所有事件都是天生自带的,不需要我们去绑定,只需要我们去触发,通过obj.事件名=function(){ } 事件名:onmousemove: ...

  7. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  8. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  9. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

随机推荐

  1. labview和matlab区别

    LabVIEW和MATLAB作为本身功能比较完善的软件环境,在各自不同的领域中有着十分广泛的应用.下面小编就详细介绍LabVIEW和MATLA以及它们之间的区别. 一.LabVIEW简介 LabVIE ...

  2. 结合Vue.js的前端压缩图片方案

    这是一个很简单的方案.嗯,是真的. 为什么要这么做? 在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克: 低网速下上传进度缓慢,用户体 ...

  3. ecahrts实现动态刷新(隔几秒重新显示)

    代码: <script> var chartDom = document.getElementById('main3'); var myChart = echarts.init(chart ...

  4. wx:key报错does not look like a valid key name

    把花括号去掉就行了,  现在改版了,  要注意了     wx:key="index"  

  5. Qt QPropertyAnimation+QTimer实现自制悬浮窗

    目录 Qt下的悬浮窗 QPropertyAnimation QTimer 事件过滤 图标变换 自适应窗口大小 使用方法 Qt下的悬浮窗 最近项目需要一个类似于360悬浮球类似的悬浮窗,当鼠标放入停留一 ...

  6. Python-术语对照表

    >>> 交互式终端中默认的 Python 提示符.往往会显示于能以交互方式在解释器里执行的样例代码之前. ... 具有以下含义: 交互式终端中输入特殊代码行时默认的 Python 提 ...

  7. Istio实践(1)-环境搭建及应用部署

    1. Istio简介 Istio是最初由IBM,Google和Lyft开发的服务网格的开源实现.它可以透明地分层到分布式应用程序上,并提供服务网格的所有优点,例如流量管理,安全性和可观察性. 它旨在与 ...

  8. 小程序 canvas 文字加粗

    在fillText前设置font属性 ctx.font = 'normal bold 18px sans-serif'; 但是有继承问题: 解决方法 - 1: 先绘制字体不加粗部分, 再绘制需要加粗部 ...

  9. 聊一聊Redis的离线分析

    背景 Redis 或许是我们大部分场景都会用到的一个利器,虽然是利器,用的姿势不对的话,终究还是会整出幺蛾子的. 比较常见的问题,不外乎内存暴增,慢查询等情况. 那么对于内存问题,可以借助redis自 ...

  10. Navicat导出结果显示科学计数法(PostgreSQL)

    原因:在EXCEL录入数超过11位,就会变成科学记数法 解决方案: 在postgresql需要导出的列中加入制表符 示例: SELECT 6280920221390000000061:: TEXT | ...