事件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. MATLAB与Carsim联合仿真时提示matlab not found的解决方法(CarSim在联合仿真时提示找不到MATLAB的解决方法)

    CarSim8.02并没有提供选择联合仿真的MATLAB/Simulink的版本的功能,CarSim总是与最后安装的MATLAB/Simulink进行联合仿真,如果安装有多个matlab版本则只打开最 ...

  2. SQL之总结(四)---null问题的处理

    概述:如果表中的某个列是可选的,那么我们可以在不向该列添加值的情况下插入新记录或更新已有的记录.这意味着该字段将以 NULL 值保存. NULL 值的处理方式与其他值不同. NULL 用作未知的或不适 ...

  3. 使用 Blueprint 要注意 render_template 函数

    此文章主要是为了记录在使用 Flask 的过程中遇到的问题.本章主要讨论 render_template 函数的问题. 使用 Flask 的同学都应该知道,项目中的 url 和视图函数是在字典里一一对 ...

  4. rabitmq 登录报错:User can only log in via localhost

    安装教程参考:https://blog.csdn.net/qq_43672652/article/details/107349063 修改了配置文件仍然报错,无法登录.解决办法:新建一个用户登录: 查 ...

  5. java中Array(数组)的用法

    8.Array(数组)    数组是作为对象来实现的.(really occupy the memopry,真实的占用内存 ) An array is a data structure that st ...

  6. PAT A1001 A+B Format

    Calculate a+b and output the sum in standard format -- that is, the digits must be separated into gr ...

  7. SourceMonitor的安装

    SourceMonitor 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 中文名 SourceMonitor 软件大小 1743KB 软件语言 英文 软件类别  国外软件 ...

  8. 使用 HTML5 input 类型提升移动端输入体验(转翻译)

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  9. ArcGIS使用技巧(四)——山体阴影

    新手,若有错误还请指正! 最近在制图的时候出现如下的情况(图1),怎么调整Display的三个参数都没用. 图 1 查看其信息,发现dem的像元大小为0.00027(图2),是未投影的 图 2 查看A ...

  10. python3-认识内置对象,运算符,表达式

    1 . 认识内置对象 在python中一切皆对象, 整数,实数,复数,字符串,列表,元组,字典,集合,zip,  map, enumerate, filter , 函数 ,类 , 分类:内置对象,标准 ...