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. 3. Git安装和使用

    3. Git安装和使用 目的 通过git管理github托管项目代码 下载安装 1)GIt官网下载:https://www.git-scm.com/download/win 2)双击安装 3)选择安装 ...

  2. 顺利通过EMC实验(17)

  3. JavaScript HTML5脚本编程——“历史状态管理”的注意要点

    历史状态管理是现代Web应用开发中的一个难点.在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此"后退"和"前进"按钮也就失去了作用,导致用户很 ...

  4. javaweb之浏览功能

    今天我们来写浏览功能,浏览主要是通过sql语句将数据库里的数据查出来,并显示在页面上. 一.dao层 在上一篇文章的基础上dao层加入浏览方法. public List<Course> l ...

  5. Android bluetoothAdapter.startDiscovery()无法搜索设备问题解决办法

    Android6.0以上要定位权限,要手动把手机软件的定位权限打开,又被坑了好长时间

  6. 【Android开发】毛玻璃效果

    使用一:静态控件上使用 先附上自定义view-BlurringView public class BlurringView extends View { private int mDownsample ...

  7. EMS查看及修改邮箱发送和接受邮件大小的方法

    默认情况下,新建用户邮箱没有进行单独设置,故用户邮箱默认值为"Unlimited"(未限制),即遵从全局设置(继承邮箱数据库策略).通过EMS查看用户邮箱发送和接受邮件大小的默认值 ...

  8. nodejs创建服务器

      'use strict'; //加载http模块: const http = require('http'); //创建一个http服务: const server = http.createSe ...

  9. Windows中Nginx配置nginx.conf不生效解决方法(路径映射)

    Windows中Nginx配置nginx.conf不生效解决方法 今天在做Nginx项目的时候,要处理一个路径映射问题, location /evaluate/ { proxy_pass http:/ ...

  10. What are PCIe Slots

    https://www.hp.com/us-en/shop/tech-takes/what-are-pcie-slots-pc What are PCIe Slots and How Can I Us ...