本教程總共5篇,每日更新一篇,請(qǐng)關(guān)注我們!你可以進(jìn)入歷史消息查看以往文章,也敬請(qǐng)期待我們的新文章!
1给猾、React第三方組件6(狀態(tài)管理之Mobx的使用①簡(jiǎn)單使用)---2018.03.28
2掂咒、React第三方組件6(狀態(tài)管理之Mobx的使用②TodoList上)---2018.03.29
3墅拭、React第三方組件6(狀態(tài)管理之Mobx的使用③TodoList中)---2018.03.30
4失仁、React第三方組件6(狀態(tài)管理之Mobx的使用④TodoList下)---2018.04.02
5掀序、React第三方組件6(狀態(tài)管理之Mobx的使用⑤異步操作)---2018.04.03
開發(fā)環(huán)境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1爹脾、我們復(fù)制一份mobx1到mobx2中舶担，并在mobx下Index.jsx中添加路由
2坡疼、修改mobx2下的Index.jsx文件
import Reactfrom 'react';
import {useStrict}from 'mobx';
import {observer}from 'mobx-react';
import Statefrom './State'
useStrict(true);
const newState =new State();
@observer
class Indexextends React.Component {
render() {
return (
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? newState.add(this.refs['todoInput'].value)}>添加
? ? ? ? ? ? ? ?{
newState.list.map(data =>
}
? ? ? ?)
}
}
export default Index
3、修改State.js
import {observable, action}from 'mobx';
class State {
@observablelist = [];
? ?@actionadd = (title) => {
if (title) {
this.list.push({id:this.list.length +1, title: title, status:1});
? ? ? ?}else {
alert('不能為空')
}
};
}
export default State
4衣陶、查看瀏覽器效果
本文完
禁止擅自轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)?jiān)诠娞?hào)中留言聯(lián)系我們!
感謝童鞋們支持!
如果你有什么問題,可以在下方留言給我們!
