index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { observable, computed, useStrict, action } from 'mobx';
import App from './App';
import * as serviceWorker from './serviceWorker';
class VM{
@observable firstName = '';//设置属性为可观察的
@observable lastName = '';
//设置计算属性
@computed get fullName() {
return this.firstName + this.lastName;
}
//设置动作
@action
setName(key, event) {
this[key] = event.target.value;
}
//设置动作,注意,与 @action 不同的是,@action.bound 不需要一个name参数,名称将始终基于动作绑定的属性
@action.bound
resetName() {
this.firstName = '';
this.lastName = '';
}
}
//将VM类传入App
ReactDOM.render(
<React.StrictMode>
<App vm={new VM()} />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import { observer } from 'mobx-react';
//设置App为观察者
@observer
class App extends Component{
render(){
const vm = this.props.vm;
return (
<div className="App">
<p>First Name<input value={vm.firstName} onChange={e => vm.setName('firstName', e)} /></p>
<p>Last Name<input value={vm.lastName} onChange={e => vm.setName('lastName', e)} /></p>
<h1>Full Name {vm.fullName}</h1>
<button onClick={vm.resetName}>resetName</button>
</div>
)
}
}
export default App;
说明:
如果去掉resetName装饰器的bound,则会报错如下: