import React, { Component, useEffect } from 'react';
import './App.css';
import { observable, computed, action } from 'mobx';
import { observer,Provider,inject } from 'mobx-react'
//数据结构
class Todo {
@observable todos = [ { id: 1, title: '工作1', finished: true }, { id: 2, title: '工作2', finished: false }];@computed get unfinishedTodoCount() { return this.todos.filter(todo => !todo.finished).length;}@action delTodo(id) { console.log('删除'); this.todos = this.todos.filter(todo => todo.id !== id); console.log(this.todocs);}@action updateTodo(id,done) { console.log('update'); const newTodos = this.todos.map((todoObj)=>{ if(todoObj.id === id) return {...todoObj,done} else return todoObj }) this.todos = newTodos;}}
@observer
class TodoListView extends Component {
updateTodo = (todoId,done) => { this.props.todoList.delTodo(todoId,done)}delTodo = (todoId) => { this.props.todoList.delTodo(todoId)}render() { return ( <div> <ul> {this.props.todoList.todos.map(todo => <TodoView todo={todo} key={todo.id} delTodo={this.delTodo} updateTodo={this.updateTodo} /> )} </ul> 未实现工作数：{this.props.todoList.unfinishedTodoCount} </div> )}}
@observer
class TodoView extends Component {
render() { // return <div>{this.props.todo.title}</div>; var todo = this.props.todo; return ( <li> <label htmlFor=""> <input type="checkbox" checked={todo.finished} onChange={() => this.props.updateTodo(todo.id,todo.finished)} /> {todo.title} </label> <button onClick={() => this.props.delTodo(todo.id)}>del</button> </li> )}}
const todoList = new Todo();
const ToDoApp = inject('todoList')(observer(({todoList}) => {
useEffect(() => { console.log('hhhh');})return ( <div> <TodoListView todoList={todoList}/> </div>)}))
class App extends Component{
render(){ return ( <Provider todoList={todoList}> <div> <ToDoApp /> </div> </Provider> );}}
export default App;