javascript - 为什么类方法在 React 组件中表现不正常？

Question

给定一个这样的组件:

class App extends Component {
  state = {}

  sayHello() {
    // 'this' is undefined here... It should point to the component instance
  }

  render() {
    return (
      <div onClick={this.sayHello}>
        clickMe
      </div>
    );
  }
}

为什么 sayHello 无法访问 this ？这不是 ES6 类的预期行为。我错过了什么？

Answer 1

在 javascript 中，this 取决于您如何调用该方法。这可以通过在方法内绑定(bind) this 来更改。为了说明您的示例中发生的情况:

class App {
    sayHello() {
        console.log(this)
    }
}

const a = new App()
a.sayHello() // A {}
const callback = a.sayHello // what you are passing as a callback to onClick
callback() // undefined

要解决此问题，您需要在 sayHello 函数中绑定(bind) this。您可以使用类属性来实现此目的。这仍然是 javascript 的一个实验性功能，但似乎是社区接受的为 React 组件绑定(bind) this 的方式。

class App {
    sayHello = () => {
        console.log(this)
    }
}

callback() // A {}