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>
        );
      }
    }

bind（this）的目的是什么？它将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'

如果您删除bind（this），它将获得相同的结果

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

结果：

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

我确定我理解错了，这可能是地球上最糟糕的问题，但是我是es6的新手，我还不习惯上课，所以我为此表示歉意。

Answer 1

责备JavaScript无法反应。这样做是为了在要传递函数时保留对象实例。当然，对于函数来说，期望此类对象在语义上必须正确。最常见的情况是在传递对象方法时将其绑定。关键字This取决于函数的调用方式，而不取决于函数的创建方式/位置。与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函数，因此this.sayName指向我们的函数，很好而且很花哨。

但是React在幕后所做的就是将this.sayName分配给另一个变量。也就是说，就像这样：

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>;

它应该可以工作！

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

1 个答案: