2016-06-13 4 views
0

古い構文の一部を新しいES6構文に変換しようとしています。私は、お気に入りのクラスや不満なクラスをトグルするボタンを持っています。これは古い構文で動作し、私の変換で何が欠けているのか不思議です。React - 古いvar構文とクラスの拡張

この古いバージョンでは正常に動作します:

インポートは '反応' からリアクト。

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; 

これはいませんが:私はES6で理解したよう

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; 
+0

ES6モジュールを使用している場合は、最後の行は 'export default BtnFav' –

答えて

1

、コンポーネントクラスはメソッドに反応以外にthisを自動バインドしません。

this.handleClick = this.handleClick.bind(this) 
+0

でなければなりません。ありがとうございました。私はコンストラクタにそれを入れ、それは正常に動作します。 –

関連する問題