ReactJS将方法绑定到类组件

Question

我正在Codeacademny上做ReactJS课程，他们让我感到困惑。

（编辑-完整代码）代码照片：

并且没有scream类方法的构造函数或对任何绑定方法的任何调用。

但是，在进一步的练习中，他们告诉您不能这样做。

我可能会错过一些东西。

Answer 1

显然this.scream是一个箭头函数。箭头功能不需要绑定。默认情况下，它指向正确的上下文。

scream = () => { ... }

Answer 2

scream = () => { ... }

render() {
    return <button onClick={()=>this.scream()}>AAAAAH!</button>;
  }

Answer 3

您必须注意JSX回调中的含义。在JavaScript中，默认情况下不绑定类方法。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时将无法定义。

这不是特定于React的行为；它是函数在JavaScript中工作方式的一部分。通常，如果您引用的方法后面没有（），例如 onClick={this.handleClick}，您应该绑定该方法。

使用ES6类定义组件时，常见的模式是将事件处理程序作为类上的方法。例如，此Toggle组件呈现了一个按钮，该按钮使用户可以在“ ON”和“ OFF”状态之间切换：

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(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

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

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);```

Answer 4

您可以简单地使用箭头函数（无需在构造函数中进行绑定）。

 scream = () => { console.log('Here') }

 render() {
    return <button onClick={this.scream}>AAAAAH!</button>;
  }

或者您可以内联调用此函数。

 render() {
        return <button onClick={() => console.log('Here')}>AAAAAH!</button>;
      }

Answer 5

您应该使用箭头函数进行事件处理，以将函数绑定到对象。其他解决方案是在构造函数中自动绑定每个函数，例如：

class Test{
   constructor(){
       Object.getOwnPropertyNames(Test.prototype).forEach(
                      method => this[method] = this[method].bind(this));
}

了解有关@AutoBind装饰器的更多信息。

Answer 6

  

并且没有构造函数或在任何地方调用scream类方法的任何bind方法。

仅在方法实际在内部使用this时，才需要将this绑定到组件实例。

在您的示例中情况并非如此，因此无需绑定它。无论该方法如何执行，都将始终产生相同的输出。

这里是一个没有React的例子来说明区别：

var obj = {
  value: 42,
  method1() { // doesn't use `this`
    console.log("yey!");
  },
  method2() { // uses `this`
    console.log(this.value);
  },
};

obj.method1(); // works
obj.method2(); // works

var m1 = obj.method1;
var m2 = obj.method2;

m1(); // works
m2(); // BROKEN!

var m2bound = obj.method2.bind(obj);
m2bound(); // works