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. Architecture Principles

    Architecture Principles - Completed Components Name Statement Rationale Implications TOGAF Principle ...

  2. CSS揭秘之《多重边框》

    1.box-shadow还接受第四个参数(称作"扩张半径"), 通过指定正值或负值, 可以让投影面积加大或者减小2.如果我们想要一道实线边框其实也是可以通过box-shadow来模 ...

  3. link和@import的区别浅析

    我们都知道,外部引入 CSS 有2种方式,link标签和@import.它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学习 ...

  4. .Net Core:Docker无法拉取mcr.microsoft.com相关镜像解决办法

    今天在教同事Docker简单部署Asp.Net Core项目,pull镜像时突然出现下图中的错误: 因为微软在 2018 年五月之后,只会将相关镜像打包发布到 MCR 上.但是 MCR 对国内用户不太 ...

  5. vue后台管理系统组件弹窗

    //addFormVisibleIcon可在data中设置true与falsehttps://element.eleme.io/#/zh-CN/component/installation <e ...

  6. Element instanceof Node

    今天看到一个问题,问 Element instance Node 为什么是 false. 首先,我们知道 Element 是 Node 的子类,那么为什么 Element instanceof Nod ...

  7.  CPUs Intel 925X/915 Chipset (925X主板芯片组)

    这个是2004年的intel产品的设计(主板,主板芯片组,北桥,南桥),结构也比较清晰,主要想看南桥和北桥的设计. 一些英文解释 ECC是一种能够实现"错误检查和纠正"的技术D92 ...

  8. 随机获取gbr颜色值

  9. 新手入门C语言第九章:C函数

    C 函数 函数是一组一起执行一个任务的语句.每个 C 程序都至少有一个函数,即主函数 main() ,所有简单的程序都可以定义其他额外的函数.您可以把代码划分到不同的函数中.如何划分代码到不同的函数中 ...

  10. Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...