2016-06-16 10 views
1

私は反応の中で簡単なカウンタを構築するためにMobxを使用しようとしています。私はそれがクラスの値を更新していることがわかりますが、更新された値は反応ビューで更新されていません。ここでmobxが反応しないビューを更新しています

は、私はちょうどJSFiddleにあなたのコードを試してみましたが、問題なく実行するように思わ

import {observable} from 'mobx'; 
import {observer} from 'mobx-react'; 
import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 

class CounterStore { 
    @observable counter; 

    constructor(){ 
    this.counter = 0; 
    } 

    increase(){ 
    this.counter++; 
    } 

    decrease(){ 
    this.counter--; 
    } 
} 

@observer 
class Counter extends Component { 
    render(){ 
    const counter = this.props.counter; 
    return(
     <div style={{display: 'flex'}}> 
     <button onClick={counter.increase.bind(counter)}>+</button> 
     <p style={{color: 'black', marginRight: '1rem', marginLeft: '1rem'}}>{counter.counter}</p> 
     <button onClick={counter.decrease.bind(counter)}>-</button> 
     </div> 
    ); 
    } 
} 

const store = new CounterStore(); 

ReactDOM.render(
    <Counter counter={store} />, 
    document.getElementById('app') 
); 
+0

コードが正しいように見えます。コンソールにエラーが表示されますか? –

答えて

関連する問題