変数はmobxクラスのメソッドでNaNです（observable - mobx）

Question

私はcounter whoch observable変数を更新しようとしていますが、コンポーネントの値を見ています。インクリメントボタンをクリックすると、this.counterは常にNaNであり、 。 コンポーネント：

@observer 
class App extends Component { 
    constructor(props){ 
    super(props) 
    } 
    render() { 
    const counter = this.props.appState; 
    return (
     <div className={styles.description}> 
      <button onClick={counter.increment.bind(this)}>+</button> 

Mobxクラス;

class AppState{ 
    @observable counter=0 

    increment(){ 
     debugger //its null.. 
     this.counter++; 
    } 
} 
export default AppState 

mainjs：

import AppState from './AppState' 
... 
var appState = new AppState 

ReactDOM.render(
    <App appState={appState}/>, 
    document.getElementById('root') 
); 

私はそれを修正することができますか？

Answer 1

あなたの問題は、thisが指しているところでは、鋭い舌を保つ必要があると思います。 Appにはcounterというフィールドはありません。それは、bind(this)を書くときに参照しようとするものです。

Try <button onClick={() => counter.increment()}>+</button>