事件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)的更多相关文章

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

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

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

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

  3. 好客租房32-事件绑定this指向(class实例方法)

    class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' // ...

  4. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  5. jQuery事件绑定—on()、bind()与delegate()

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...

  6. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  7. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  8. JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

    1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...

  9. 关于JavaScript的事件绑定

    js事件绑定的几种方式 JavaScript中有三种常用的绑定事件方法: 1. 在DOM元素中直接绑定: 2. 在JavaScript代码中绑定: 3. 绑定事件佳妮婷函数. 一.在DOM元素中直接绑 ...

随机推荐

  1. (stm32f103学习总结)—can总线

    参考:CAN总线的位时序与参数设置 CAN总线位同步 1 CAN总线介绍 CAN 是Controller Area Network 的缩写,中文意思是控制器局域网 络,是ISO国际标准化的串行通信协议 ...

  2. java中如果我老是少捕获什么异常,如何处理?

    马克-to-win:程序又一次在出现问题的情况下,优雅结束了.上例中蓝色部分是多重捕获catch.马克-to-win:观察上面三个例子,结论就是即使你已经捕获了很多异常,但是假如你还是少捕获了什么异常 ...

  3. Idea中创建maven项目(超详细)

    Idea中创建maven项目 提示:前提条件时maven已经安装好,并且环境变量也配置完成,maven没安装好或者环境变量没有配置好的请参考我上一篇文章--maven的安装和配置 上篇博文链接:htt ...

  4. MySQL学习day3随笔

    索引在数据量不大的时候体现不出来,数据很多的时候区别明显 1 select * from app_user where `name`='用户9999';-- 0.053 sec 2 select * ...

  5. Java面试整理(精简版)

    Java面向对象有哪些特征,如何应用 特征(OOP) 解释说明 通俗理解 关系联系 作用 封装 隐藏内部细节,只对外暴露访问方法 属性/方法封装,便于使用,限制不合理操作 类-类 低耦合,高内聚,增强 ...

  6. python基础练习题(九九乘法表)

    又把python捡起来了,动手能力偏弱,决定每日一练,把基础打好! ------------------------------------------------------------------ ...

  7. box-shadow-阴影,你真的懂吗

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  8. git-config配置多用户环境以及 includeIf用法

    git-config配置多用户环境以及 includeIf用法 git-config配置多用户环境以及 includeIf用法 背景 介绍 配置 栗子 背景 开发人员经常遇到这样的问题,公司仓库和个人 ...

  9. Hyperledger Fabric 通道配置文件和容器环境变量详解

    摘要 Fabric 网络启动的过程中需要进行大量配置,新学时对各个配置的作用一无所知,这导致我曾在网络出问题时先对配置文件的内容进行排列组合后再祈祷它能在某个时刻顺利运行,因此掌握 fabric 各个 ...

  10. 【PostgreSQL】入门学习笔记

      前言: 以下内容为前几天在备考PostgreSQL入门考试时候做的笔记,经过了全职的两天的奋战与实验,并最终顺利通过了PCA初级认证考试.现在把我学习的笔记分享给大家,文中有对应的思维导图图片可供 ...