文档章节

React事件处理函数中绑定this的bind()函数

面码
 面码
发布于 2017/04/18 20:30
字数 569
阅读 25
收藏 0

今天在看最新的React官方教程时发现了一个问题,开始全面使用ES6语法的React在Handling Events这节中,提到了绑定的事件处理函数要现在构造函数中使用bind()将this进行正确的绑定,涉及到的代码如下:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

 

之前就一直对bind()函数理解不够深入,这里使用bind()的作用一开始不是很明白,就在网上查阅了资料,在MDN技术文档中找到了这一函数的具体作用如下: 
bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数. 
之后在后面的一个例子很好的解释了React这里使用bind的作用:

创建绑定函数 
bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来,然后再调用,希望方法中的 this 是原来的对象。(比如在回调中传入这个方法。)如果不做特殊处理的话,一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数,则能很漂亮地解决这个问题:

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域

// 创建一个新函数,将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

 

结合这里的例子进行理解,React构造方法中的bind即将handleClick函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件

本文转载自:http://blog.csdn.net/jutal_ljt/article/details/53381670

共有 人打赏支持
面码
粉丝 26
博文 293
码字总数 72288
作品 0
成都
程序员
私信 提问
React中this丢失的解决方法

我们在给一个dom元素绑定方法的时候,例如: React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 React中的bind同上...

薛定喵的谔
03/07
0
0
为什么在React Component需要bind绑定事件

我们在 React class Component 绑定事件时,经常会通过 bind(this) 来绑定事件,比如: 下面就要看为什么我们需要bind(this)在组件中。 JavaScript 中 this 绑定机制 默认绑定(Default Bind...

下面就要看为什么我们需要bind(this)在组件中。
01/16
0
0
React 深入系列5:事件处理

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 --- React 深入系列5:事件处理 React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的...

iKcamp
2018/05/04
0
0
React - 事件处理

类似于DOM事件处理,有几点不同之处: React的事件名字是首字母小写的驼峰式写法,而不是小写的。 在JSX里面,事件处理器是一个函数,而不是一个字符串。 例子,HTML: React: 在React里面,...

OSC首席键客
2016/11/11
71
0
解析React事件处理的机制及原理

这篇文章主要介绍了React事件处理的机制及原理,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 React中的事件处理在React元素中绑定事件有两点需要注意...

前端攻城小牛
2018/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Data Lake Analytics IP白名单设置攻略

当我们成功开通了 DLA 服务之后,第一个最想要做的事情就是登录 DLA 数据库。而登录数据库就需要一个连接串。下面这个页面是我们首次开通 DLA 之后的界面,在这里我们要创建一个服务访问点。...

阿里云官方博客
12分钟前
1
0
Flink之用户代码生成调度层图结构

在Flink中,由用户代码生成调度层图结构,可以分成3步走:通过Stream API编写的用户代码 -> StreamGraph -> JobGraph -> ExecutionGraph。 StreamGraph:根据用户通过Stream API编写的代码生...

xtof
15分钟前
1
0
关于redis写入

package com.paic.common.utils;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.dao.DataAccessException;import org.springframework.......

鬼才王
17分钟前
1
0
golang发送email SSL

email SSL 网上能找到使用golang 发送邮件和发送加密邮件的教程。发送简单的文本邮件非常简单,但遇到需要发送附件时就基本要靠github.com/scorredoira/email。 如果要发送加密带附件的邮件,...

zhnxin
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部