我不明白为什么输入没有使用 MobX 更新
I can't figure out why the input is not updating using MobX
所以我尝试将 MobX 与 React 一起使用,但我无法弄清楚为什么输入没有更新其值。
这是我到目前为止编写的代码:
@observer(['recipeStore'])
class App extends Component {
render() {
return (
<input type="text" value={this.props.recipeStore.og} onChange={(e) => {this.props.recipeStore.og = e.target.value}}/>
);
}
}
class RecipeStore {
@observable og;
@observable style;
constructor() {
this.og = 1;
this.style = {og_low: 1, og_high: 1, fg_low: 1, fg_high: 1, abv_low: 1, abv_high: 1};
}
@computed get fg() {
if (!this.og) return '';
return (((this.og - 1) * 0.25) + 1).toFixed(3);
}
@computed get abv() {
if (!this.og) return '';
return ((this.og - this.fg) * 131).toFixed(1);
}
}
const recipeStore = new RecipeStore();
ReactDOM.render(
<Provider recipeStore={recipeStore}>
<App />
</Provider>,
document.getElementById('root')
);
我找到了解决办法。因为我看到我的商店正在更新,但是 none 的反应组件生命周期被触发,所以我不得不在其他地方查看。
原来问题是 @observer
装饰器没有正常工作。
我不得不更改我的 babel.dev.js
以确保插件 'babel-plugin-transform-decorators-legacy'
是列表中的第一个。
我在这里找到了提示:https://github.com/mobxjs/mobx/issues/105#issuecomment-213356342
所以我尝试将 MobX 与 React 一起使用,但我无法弄清楚为什么输入没有更新其值。
这是我到目前为止编写的代码:
@observer(['recipeStore'])
class App extends Component {
render() {
return (
<input type="text" value={this.props.recipeStore.og} onChange={(e) => {this.props.recipeStore.og = e.target.value}}/>
);
}
}
class RecipeStore {
@observable og;
@observable style;
constructor() {
this.og = 1;
this.style = {og_low: 1, og_high: 1, fg_low: 1, fg_high: 1, abv_low: 1, abv_high: 1};
}
@computed get fg() {
if (!this.og) return '';
return (((this.og - 1) * 0.25) + 1).toFixed(3);
}
@computed get abv() {
if (!this.og) return '';
return ((this.og - this.fg) * 131).toFixed(1);
}
}
const recipeStore = new RecipeStore();
ReactDOM.render(
<Provider recipeStore={recipeStore}>
<App />
</Provider>,
document.getElementById('root')
);
我找到了解决办法。因为我看到我的商店正在更新,但是 none 的反应组件生命周期被触发,所以我不得不在其他地方查看。
原来问题是 @observer
装饰器没有正常工作。
我不得不更改我的 babel.dev.js
以确保插件 'babel-plugin-transform-decorators-legacy'
是列表中的第一个。
我在这里找到了提示:https://github.com/mobxjs/mobx/issues/105#issuecomment-213356342