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

前端之家收集整理的这篇文章主要介绍了React事件处理函数中绑定this的bind()函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天在看最新的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时可以时刻指向这一组件

原文链接:https://www.f2er.com/react/304219.html

猜你在找的React相关文章