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;