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指向(箭头函数)的更多相关文章

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

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

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

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

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

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

  4. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  5. react事件绑定,事件传参,input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

  6. 普通函数跟箭头函数中this的指向问题

    箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...

  7. ES6箭头函数this指向

    普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'us ...

  8. JS五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)

    目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...

  9. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

随机推荐

  1. html5系列:form 2.0 新结构

    以往的一个form表单,结构比较死板,所有的form元素都必须处在<form>和</form>之间才有效,这会造成一些麻烦,比如说:像bootstrap这种使用<div& ...

  2. JQuery基础修炼-样式篇

    jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...

  3. 自定义View的onDraw 函数不执行

    解决办法:    在自定义的View 的构造方法中添加一句话:   this.setWillNotDraw(false);解释:那么加这条语句的作用是什么?先看API:        If this ...

  4. Android 预置APK

    1.   预置apk,使其不可卸载   第一步:      在 "/vendor/huawei/packages/apps" 目录下创建一个对应名称的文件夹.   第二步:   将 ...

  5. 世界各国 MCC 和 MNC 列表

    http://www.cnblogs.com/inteliot/archive/2012/08/22/2651666.html常见MCC:代码(MCC)    ISO 3166-1    国家202 ...

  6. Android打开数据库读取数据

    打开数据库读取数据 private MyDatabaseHelper dbHelper; dbHelper=new MyDatabaseHelper(this,"List.db", ...

  7. c++对c的拓展_using

    using 声明:使指定标识符可用   注意:与其他同名标识符有作用域冲突时产生二义性即报错 using 编辑指令: 使整个命名空间标识符可用 注意:与其他同名标识符作用域发生冲突使时优先使用局部变量 ...

  8. Spring-JdbcTemplate(注入到spring容器)-02

    1.导入spring-jdbc和spring-tx坐标 <dependency> <groupId>junit</groupId> <artifactId&g ...

  9. Eureka Server 的 Instance Status 一直显示主机名问题

    Eureka Server 的 Instance Status 一直显示主机名问题 注册中心启动后,访问 http://localhost:8761/ 后: 如何调整为具体所在的服务器 IP 呢? 解 ...

  10. maven打包jar到本地仓库

    1.执行如下命令 mvn install:install-file -Dfile=guava-28.2-jre.jar -DgroupId=com.google.guava -DartifactId= ...