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. 破界!Omi生态omi-mp发布,用小程序开发生成Web

    omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC.手机浏览器或者微信.手Q webview ...

  2. 【网易云信】H5 容器技术方案

    Native 开发原生应用是手机操作系统厂商(目前主要是苹果的 iOS 和 Google 的 Android)对外界提供的标准化的开发模式,他们对于 Native 开发提供了一套标准化实现和优化方案. ...

  3. C#编写一个简易的文件管理器

    编写一个简易的文件管理器,通过本次实验,练习 TreeView.ListView 和SplitContainer 控件的使用,同时熟悉 C#文件系统的操作方法以及 File 类和 Directory类 ...

  4. PAT B1061判断题

    题目描述: 判断题的评判很简单,本题就要求你写个简单的程序帮助老师判题并统计学生们判断题的得分. 输入格式: 输入在第一行给出两个不超过 100 的正整数 N 和 M,分别是学生人数和判断题数量.第二 ...

  5. Map集合的六种遍历方式

    学习目标: 熟练掌握Map的遍历方式 例题: 需求:遍历Map集合 代码如下: package com.yy.object.test.test_collection; import java.util ...

  6. python---virtualenv创建管理虚拟环境

    virtualenv创建虚拟环境 安装包virtualenv pip install virtualenv 常用命令 # 为项目创建虚拟环境 cd project_dir virtualenv env ...

  7. kubectl scale sts

    使用scale 不单单是扩容还可以:1.动态扩展服务,增加承载能力2.如果出现pod异常,可以利用这种方式,增加pod,再删除原来的pod 比如:pod所在宿主机网络或者宿主机死掉注: 但是一旦有某个 ...

  8. C语言求最大公约数最小公倍数(多种方法)

    前言 这个求解方式多样化,灵活变动,但是,网上没有很好的资源和很全的代码,特此练习,敲打后,总结成本片文章. 单一求解 一.最大公约数 1.穷举法(最简单求解方式) 利用除法方式用当前的数字不断去除以 ...

  9. 什么?你们公司还没有将JVM初始和最大堆内存大小设置为相同值?

    微信公众号:Java大家族 JVM将初始和最大内存大小设置为相同值的好处 启动应用程序时,我们指定初始内存大小和最大内存大小.对于在 JVM(Java 虚拟机)上运行的应用程序,初始和最大内存大小通过 ...

  10. 面渣逆袭:Spring三十五问,四万字+五十图详解

    大家好,我是老三啊,面渣逆袭 继续,这节我们来搞定另一个面试必问知识点--Spring. 有人说,"Java程序员都是Spring程序员",老三不太赞成这个观点,但是这也可以看出S ...