`this`正在对对象方法未定义时称作反应组分丙

我有此阵营组件（使用Mobx，商店等）：`this`正在对对象方法未定义时称作反应组分丙

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结果未定义。我做错了什么，我该如何解决这个问题？谢谢。

来源

2017-05-25 skjorrface

很肯定这是一个范围问题的解决方案，你的'this'的上下文不绑定到'updateNumber' –

您使用bind传递this的背景下updateNumber功能：

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

来源

2017-05-25 14:55:38

我已经t了说我使用Next.js并且这样做会导致以下错误：无法读取未定义的属性'target' – skjorrface

尝试添加一个'（）'，如下所示：'onChange = {store.updateNumber.bind （this）（）'如果作品我会编辑我的答案。 –

不幸的是，我仍然得到相同的错误： - （ – skjorrface

我来使用

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

来源

2017-05-26 14:23:25 skjorrface

`this`正在对对象方法未定义时称作反应组分丙

回答

相关问题