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(,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 (
First Name vm.setName('firstName', e)} />
Last Name vm.setName('lastName', e)} />
Full Name {vm.fullName}
resetName)}
}export default App;

说明：

如果去掉resetName装饰器的bound，则会报错如下：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！