为什么我们需要在ReactJS中使用bind（）来访问this.props或this.state？[副本]

Question

以这段代码为例

   import React, { Component } from ‘react’;
    class App extends Component {
      constructor(props) {
        super(props);
        this.clickFunction = this.clickFunction.bind(this);
      }
      clickFunction() {
        console.log(this.props.value);
      }
      render() {
        return(
          <div onClick={this.clickFunction}>Click Me!</div>
        );
      }
    }

绑定（这个）的目的是什么？它将函数clickFunction绑定到clickFunction已经绑定到的对象的上下文，让我用一个普通的javascript代码来说明我想说的话：

class my_class {
  constructor() {
    this.run = this.run.bind(this)
  }
  run() {
    console.log(this.data)
  }
}
my_class.data = 'this is data'
new my_class().run() //outputs 'undefined'

如果你移除绑定（这个），它会给你同样的结果

  constructor() {
    this.run = this.run
  }

结果：

new my_class().run() //still outputs 'undefined'

我肯定我理解错了，这可能是地球上最糟糕的问题，但是我对es6还不熟悉，我还不习惯上课，所以我为此道歉

Answer 1

责怪别人，不要做出反应。这样做是为了在传递函数时保留对象实例。当然，它必须在语义上正确，函数才能期望这样的对象。最常见的情况是在传递对象方法时绑定它。关键字This取决于函数的调用方式，而不是函数的创建方式/位置。调用时应保持与此的关系。

考虑：

class Welcome extends React.Component {
    render() {
      return <button onClick={this.sayName}>Say My 
           Name</button>;                        
    }

    sayName() {
      alert(this.props.name);
    }
}

在React中，您可以这样调用：。这将呈现一个按钮。单击按钮应触发带有“鲍勃”的警报。

除非它没有。因为在上面的例子中，这在sayName函数中是未定义的。

render函数中发生的事情是，它引用了React组件的当前实例。该组件定义了一个sayName函数，所以这个.sayName指向我们的函数，非常好。

但是React在幕后所做的是将this.say名称分配给另一个变量。那就是，就像这样：

let onClick = this.sayName;
onClick(); // Technically a click event is passed 
to onClick

//但对于我们的目的来说，这并不重要，我们得到了一个错误。因为这是未定义的。这是非常令人困惑的，因为在以前版本的React中，React将为您“自动绑定”事件处理程序，因此它可以工作。但在某个时候，Facebook决定停止这样做，所以。。。我们到了。

那么我们如何修复我们的组件呢？我们只是把自己绑起来，像这样：

<button onClick={this.sayName.bind(this)}>Say My 
Name</button>;

或使用ES6语法：

<button onClick={() => this.sayName()}>Say My 
Name</button>;

它应该工作！