1-2 Mobx 入門實踐之TodoList(官方Demo)
阿新 • • 發佈：2018-03-06
this bracket 組件 turn cli gre requests rac ria
第一步：導入模塊
import React, { Component } from ‘react‘;
import { observable, autorun,computed } from ‘mobx‘
import {observer} from "mobx-react";
第二步：創建store
class ObservableTodoStore{
@observable todos = [];
@observable pendingRequests = 0;
constructor(){
autorun(()=>{
console.log(this.report);
})
}
@computed get completedTodosCount() {
return this.todos.filter(
todo => todo.completed === true
).length;
}
@computed get report() {
if (this.todos.length === 0)
return "沒有任務";
return `下一個任務: "${this.todos[0].task}". ` +
`進度: ${this.completedTodosCount}/${this.todos.length}`;
}
addTodo(task) {
setTimeout(()=>{
this.todos.push({
task: task,
completed: false,
assignee: null
});
},1000)
}
}
第三步：寫組件TodoList 和 TodoView
<TodoList/>
@observer
class TodoList extends React.Component {
onNewTodo = () => {
this.props.store.addTodo(prompt(‘輸入一個新的store:‘,‘wjl‘));
}
render(){
const store = this.props.store;
return(
<div>
{store.report}
<ul>
{
store.todos.map((todo,idx)=><TodoView todo={todo} key={idx} />)
}
{ store.pendingRequests > 0 ? <marquee>Loading
<button onClick={ this.onNewTodo }>New Todo</button>
<small> (double-click a todo to edit)</small>
{/* <RenderCounter />*/}
</ul>
</div>
)
}
}
<TodoView/>
class TodoView extends React.Component {
render() {
const todo = this.props.todo;
return (
<li onDoubleClick={ this.onRename }>
<input
type=‘checkbox‘
checked={ todo.completed }
onChange={ this.onToggleCompleted }
/>
{ todo.task }
{ todo.assignee
? <small>{ todo.assignee.name }</small>
: null
}
{/*<RenderCounter />*/}
</li>
);
}
onToggleCompleted = () => {
const todo = this.props.todo;
todo.completed = !todo.completed;
}
onRename = () => {
const todo = this.props.todo;
todo.task = prompt(‘Task name‘, todo.task) || todo.task;
}
}
第四步：加入到App組件界面顯示
class App extends Component {
render() {
return (
<div className="App">
<TodoList store={ observableTodoStore } />
</div>
);
}
}
第五步，運行代碼。
具體代碼詳見：https://github.com/gitwujiaolong/react-mobx-demo
1-2 Mobx 入門實踐之TodoList(官方Demo)