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)} />

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

2 个答案: