javascript - React.js ES6 避免将 'this' 绑定(bind)到每个方法

Question

最近，我开始研究 React.js，我喜欢它。我从常规的 ES5 开始，以便掌握一些东西，文档都是用 ES5 编写的...

但现在我想试试 ES6，因为它 Shiny 而新颖，而且它似乎确实简化了一些事情。令我非常困扰的是，对于我添加到组件类中的每个方法，我现在都必须将“this”绑定(bind)到，否则它将不起作用。所以我的构造函数最终看起来像这样:

constructor(props) {
  super(props);
  this.state = { ...some initial state... }

  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
}

如果我要向类中添加更多方法，这将变得更大、更丑陋。

我的问题是，有没有办法解决这个问题，或者至少让它更容易、更短、更不难看？我想用 ES6 尝试 React 的主要原因之一是让我的代码更简洁，但这样做适得其反。如有任何建议或意见，我们将不胜感激。

Answer 1

您可以使用 class fields在构造函数之外进行绑定(bind)。它们如下所示:

class Foo extends React.Component {

  handleBar = () => {
    console.log('neat');
  };

  handleFoo = () => {
    console.log('cool');
  };

  render() {
    return (
      <div
        onClick={this.handleBar}
        onMouseOver={this.handleFoo}
      />
    );
  }

}

Babel 通过其 class properties transform 实验性地支持类字段, 但它们仍然是“实验性的”，因为它们是 Stage 3 Draft (还没有在 Babel 预设中)。

然而，在 ES7 或在 Babel 中启用该功能之前，您将需要手动进行绑定(bind)。 Babel 在 React on ES6+ 上的博客文章中简要介绍了这个主题。 .