反应 - 旧的var语法与.class扩展

Question

我正在尝试将一些旧语法转换为新的ES6语法。我有一个按钮可以切换收藏/不喜欢的类，它适用于旧语法，我想知道我在转换中缺少什么。

这个旧版本工作正常：

从"反应"导入反应;

var BtnFav = React.createClass({
  getInitialState() {
    return {favorited: false};
  },
  handleClick(event) {
    this.setState({favorited: !this.state.favorited});
  },
  render() {
    var favStatus = this.state.favorited ? 'btn btn-fav' : 'btn btn-notfav';
    return (
      <button className={favStatus} onClick={this.handleClick}></button>
    );
  }
});
module.exports = BtnFav;

虽然这不会：

import React from 'react';
class BtnFav extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favorited: false};
  }
  handleClick(event) {
    this.setState({favorited: !this.state.favorited});
  }
  render() {
    var favStatus = this.state.favorited ? 'btn btn-fav' : 'btn btn-notfav';
    return (
      <button className={favStatus} onClick={this.handleClick}></button>
    );
  }
};
module.exports = BtnFav;

Answer 1

据我在 ES6 中了解，组件类不会自动绑定this到非 React 方法。在构造函数中，添加：

this.handleClick = this.handleClick.bind(this)