当被称为反应组件道具时，`this`在对象方法上未定义

Question

我有这个React组件（使用Mobx，商店等）：

 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> ), ); 

当然商店应该放在一个单独的文件中，为了清楚起见，我在那里添加了它。 当执行“updateNumber”功能的问题是this会导致不确定的。 我做错了什么，我该如何解决这个问题？ 谢谢。

Answer 1

您使用bind this作为上下文传递给updateNumber函数：

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

Answer 2

我使用了解决方案

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