1-2 Mobx 入门实践之TodoList(官方Demo)

Posted wujiaolong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1-2 Mobx 入门实践之TodoList(官方Demo)相关的知识,希望对你有一定的参考价值。

第一步:导入模块


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...</marquee> : null }
                    <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>
    );
  }
}
 
 
第五步,运行代码。
 





以上是关于1-2 Mobx 入门实践之TodoList(官方Demo)的主要内容,如果未能解决你的问题,请参考以下文章

MobX入门

react入门系列之todolist代码优化(使用react 新特性,es6语法)

Consul 快速入门 - Kong最佳实践

mobx 知识点集合案例(快速入门)

mobx 知识点集合案例(快速入门)

mobx 知识点集合案例(快速入门)