React - old var syntax vs. class extends

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, классы компонентов не autobind this, не являющихся Реагировать методов. В конструкторе, добавьте:

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