React系列bind this

在实际开发中遇到事件不执行的情况,一直不理解bind函数,正好理理,代码如下

 handleClick() {
      this.setState({
        text: 'Clicked'
      });
    }

    render() {
      return 

{'Hello ' + this.state.text}

; }

this.handleClickthis作用域的callback的问题,实际中this.state.text不会发生变化。
React官网上找到三个解决方案

React系列bind this_第1张图片
在constructor中加上bind
React系列bind this_第2张图片
使用箭头函数1
React系列bind this_第3张图片
使用箭头函数2

还可以直接在onClick方法上bind

handleClick() {
      this.setState({
        text: 'Clicked'
      });
    }

    render() {
      return 

{'Hello ' + this.state.text}

; }

bind函数的含义

**bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数. **

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

总结下bind使用就是为了保证this时时刻刻指向当前对象。

你可能感兴趣的:(React系列bind this)