1推荐使用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>
        )
    }
}
 
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
2箭头函数

<button onClick={()=>this.handleNum}>点击加一</button>
3bind函数

this.handleNum=this.handleNum.bind(this)

好客租房33-事件绑定this指向(总结)的更多相关文章

  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. 好客租房32-事件绑定this指向(class实例方法)

    class实例方法 利用箭头函数的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. 学习移动机器人SLAM、路径规划必看的几本书

    作者:小白学移动机器人链接:https://zhuanlan.zhihu.com/p/168027225来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 声明:推荐正版图 ...

  2. 利用Matlab快速绘制栅格地图

    代码演示 % 基于栅格地图的机器人路径规划算法 % 第1节:利用Matlab快速绘制栅格地图 clc clear close all %% 构建颜色MAP图 cmap = [1 1 1; ... % ...

  3. .NET程序设计实验三

    实验三  Windows 应用程序开发 一.实验目的 1. 掌握窗口控件的使用方法: 2. 掌握Windows 的编程基础. 二.实验要求 根据要求,编写 C#程序,并将程序代码和运行结果写入实验报告 ...

  4. 小程序申请测试appid

    话不多说,直接上图:  1. 登录微信官方文档: https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html  2. ...

  5. Make-learning

    Make学习笔记 make是工具,Makefile是指导make工作的文件,而CMake则是生成Makefile的工具 要点: 终极目标是Makefile里面的第一个规则目标 目标下面的命令必须接的是 ...

  6. 利用Docker快速部署Mysql

    写在前面 我又来更新了~~~,今天内容较少,主要是利用Docker快速部署Mysql和初始化数据 利用Docker下载Mysql 简洁明了,在命令提示符中输入 docker pull mysql:8. ...

  7. Redis快速入门到精通

    Redis Redis是一个开源的使用ANSI C语言编写.支持网络. 可基于内存亦可持久化的日志型.Key-Value型 NoSQL数据库,并提供多种语言的API.从2010年3 月15日起,Red ...

  8. What is ACPI

    What is ACPI, OnNow, and PCI Power Management? Microsoft began an initiative called OnNow to shorten ...

  9. 用来创建用户docker registry认证的Secret

    集群环境:1.k8s用的是二进制方式安装2.操作系统是linux (centos)3.操作系统版本为 7.4/7.94.k8s的应用管理.node管理.pod管理等用rancher.k8s令牌以及ma ...

  10. @JsonFormat、@DateTimeFormat、@JsonSerialize注解的使用

    @JsonFormat 是jackson的注解,用于后台返回前台的时候将后台的date类型数据转为string类型格式化显示在前台,加在get方法或者date属性上面,因为 @JsonFormat 注 ...