专栏首页编程坑太多React 手动实现 this 的绑定的几种方法

React 手动实现 this 的绑定的几种方法

一 :bind 方法。

在{}中,这个方法可以帮助我们绑定事件处理器内的 this ,并可以向事件处理器中传递参数

class Hello extends React.Component {
        //最后一个参数是事件对象
    handleClick(param1,param2,event){
    alert(param1+":"+param2 + ":"+event);
  }
  render() {
            //通过bind(),可以传递单个或多个参数
    return <div onClick = {this.handleClick.bind(this,'test','test2')}>
              Hello {this.props.name} 
          </div>;
  }
}

二 : 如果方法只绑定,不传参,可以使用双冒号语法,

class Hello extends React.Component {
    handleClick(event){
    alert(event);
  }
  render() {
        //类似于{this.xxx.bind(this)}
    return <div onClick = {::this.handleClick}>
              Hello {this.props.name} 
          </div>;
  }
}

三 :constructor构造器内声明,

在组件的构造器内完成了 this 的绑定,这种绑定方式的好处在于仅需要进行一次绑定,而不需要每次调用事件监听器时去执行绑定操作

class Hello extends React.Component {
    constructor(arg){
    super(arg);
        //参数传递跟一类似
        this.handleClick = this.handleClick.bind(this,'test');
  }
    handleClick(arg,e){
    alert(arg+":"+e);
  }
  render() {
    return <div onClick = {this.handleClick}>
              Hello {this.props.name} 
          </div>;
  }
}

五 : 使用箭头函数的特性: 自动绑定了定义此函数作用域的 this

class Hello extends React.Component {
    constructor(arg){
    super(arg);
  }
    handleClick(arg,e){
    alert(arg+":"+e);
  }
  render() {
        //e为事件对象
    return <div onClick = {(e)=>{this.handleClick('test',e)}}>
              Hello {this.props.name} 
          </div>;
  }
}

或者:

class Hello extends React.Component {
    constructor(arg){
    super(arg);
  }
    handleClick = (e)=>{
    alert(e)
  }
  render() {
    return <div onClick = {this.handleClick}>
              Hello {this.props.name} 
          </div>;
  }
}

本文分享自微信公众号 - 编程坑太多(idig88),作者:看更多☞

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 『高级篇』docker之服务编排三大平台扬帆起航(21)

    PS: 国内这种公司还是很多的,他们致力于帮助互联网企业来使用docker。让企业不管是传统服务,还是微服务,都可以享受到docker带来的遍历。他们的方案基本...

    IT故事会
  • JQuery碎碎念

    IT故事会
  • jQuery 之 元素节点操作滚轮事件与函数节流

    IT故事会
  • react的事件处理为什么要bind this 改变this的指向?

    这句话大概意思就是,你要小心jax回调函数里面的this,class方法默认是不会绑定它的

    Tz一号
  • 软件工程和项目管理

    项目管理其实是一个非常宽泛的学科,它不仅仅只适合于软件(或互联网或IT)行业,其实也适合其他行业,例如建筑。

    公众号php_pachong
  • WindowsMobile/Win Form-界面自适应

    起因     使用SmartPhone上的WinForm做了一个WM的小程序,结果放到手机上实际一运行。发现动态生成的控件在里面显示得都非常小,难以看清。 原因...

    用户1172223
  • 不是你不会唱歌,而是歌词效果太差!如何实现 KTV 歌词逐字效果!附源代码!cocos creator !

    创建一个空节点,添加组件脚本,修改 string 和 progress 就可以看到效果了。

    白玉无冰
  • SQL 基础--> 集合运算(UNION 与UNION ALL)

    --=============================================

    Leshami
  • ExtJs学习笔记(16)_Form布局

    这是最重要的一个布局,几乎所有的表单界面都可以采用form布局,详细的用法本文不作讨论(可以查阅官方API文档),这里只给出一个简单的示例 <script ty...

    菩提树下的杨过
  • mysqldump的简单使用

    背景 需要搞mysql数据同步,从一台服务器把数据库同步到另外一台服务器上,如果折腾过的话,就知道有个这玩意--mysqldump,其实就是mysql自带的一个...

    千往

扫码关注云+社区

领取腾讯云代金券