`this` étant non défini sur la méthode de l'objet lorsqu'il est appelé comme un accessoire composant réagir

Question

Je cette React Component (en utilisant MOBX, magasins, etc.):

import React from 'react'; 
 
import { observable } from 'mobx'; 
 
import { observer } from 'mobx-react'; 
 
import Counter from './../components/counter'; 
 

 
const CountStore = { 
 
    numbr: observable(1), 
 
    get by100() { 
 
    return this.numbr * 100; 
 
    }, 
 
    updateNumber(e) { 
 
    console.log(this); 
 
    if ((e.target.value >= 1) && (e.target.value <= 10)) { 
 
     this.numbr = e.target.value; 
 
    } else this.numbr = 'A number between 1 and 10, idiot'; 
 
    }, 
 
    get numberValue() { 
 
    return parseInt(this.numbr, 10); 
 
    }, 
 
}; 
 

 
CountStore.updateNumber(); 
 

 
export default observer(() => <Counter store={CountStore} />, 
 
);

import React from 'react'; 
 
import { observer } from 'mobx-react'; 
 
import DevTools from 'mobx-react-devtools'; 
 

 
export default observer(({store}) => (
 

 
    <div className="wrapper"> 
 
    <DevTools /> 
 
    <h5>Type a number between 1-10: {store.numberValue}</h5> 
 
    <input type="text" onChange={store.updateNumber} /> 
 
    <h5>Computed value: {props.store.by100}</h5> 
 
    </div> 
 
), 
 
);

Bien sûr, le magasin devrait être mis dans un fichier séparé, je l'ai ajouté pour plus de clarté. Le problème est lorsque la fonction "updateNumber" est exécutée this résultats indéfinis. Qu'est-ce que je fais mal et comment puis-je résoudre ce problème? Merci.

Answer 1

Vous utilisez bind passer this comme contexte pour updateNumber fonction:

<input type="text" onChange={store.updateNumber.bind(this) } /> 

Answer 2

Je suis venu à une solution en utilisant

<input type="text" onChange="{e => store.updateNumber(e)} />