读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. React
  3. 正文

React事件绑定

2021年1月6日 117点热度 0人点赞 0条评论
1、在构造函数内使用bind绑定this
import React, { Component } from "react";
class Click extends Component {
    constructor(props){
        super(props)
        this.hanldeClick = this.hanldeClick.bind(this)
    }
   hanldeClick(){
       console.log("构造函数内使用bind绑定this")
   }
    render() {
        return <button onClick={this.hanldeClick} >Click</button>
    }
}


export default Click
2、箭头函数绑定this
import React, { Component } from "react";
class Click extends Component {
   hanldeClick(){
       console.log("箭头函数绑定this")
   }
    render() {
        return <button onClick={()=>this.hanldeClick()} >Click</button>
    }
}


export default Click
3、使用bind()绑定this
import React, { Component } from "react";
class Click extends Component {
   hanldeClick(){
       console.log("bind绑定this")
   }
    render() {
        return <button onClick={this.hanldeClick.bind(this)} >Click</button>
    }
}


export default Click
4、使用箭头函数定义事件,实现绑定this
import React, { Component } from "react";
class Click extends Component {
   hanldeClick=()=>{
       console.log("绑定this")
   }
    render() {
        return <button onClick={this.hanldeClick} >Click</button>
    }
}


export default Click
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: react
最后更新:2021年1月6日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
mysql git taro hook CSS flutter Echarts 悦读 react 小程序 node JavaScript 阅读 vue 随笔 redux canvas 闲谈 Nginx
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
微信小程序自定义导航栏 微信小程序中获取当前日期 ES5新增的reduce和reduceRight 《人生》书评:人生选择的底线和原则 antd按需加载样式,不用全局引入样式 css关于居中的方式

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号