读心悦

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

React事件绑定

2021年01月06日 38点热度 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年01月06日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
小程序 悦读 canvas vue 闲谈 node Nginx CSS react redux mysql flutter JavaScript 随笔 hook taro 阅读 git Echarts
推荐文章
  1. React组件传值
  2. JavaScript设计模式-行为设计模式
  3. react函数编程Hook笔记
  4. redux、react-redux状态管理应用
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号