Question

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

这个旧版本运行良好：

从'react'导入React;

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)

React - 旧的var语法与类扩展

1 个答案: