File tree Expand file tree Collapse file tree 4 files changed +3
-70
lines changed Expand file tree Collapse file tree 4 files changed +3
-70
lines changed Original file line number Diff line number Diff line change 10
10
"author" : " " ,
11
11
"license" : " ISC" ,
12
12
"dependencies" : {
13
- "mobx" : " ^2.3.7" ,
14
- "mobx-react" : " ^3.5.1" ,
15
13
"react" : " ^15.2.1" ,
16
14
"react-dom" : " ^15.3.0"
17
15
},
Original file line number Diff line number Diff line change 1
1
import React from "react"
2
- import { observer } from "mobx-react"
3
2
4
3
5
- @observer
6
4
export default class TodoList extends React . Component {
7
- create ( e ) {
8
- if ( e . which === 13 ) {
9
- this . props . store . createTodo ( e . target . value )
10
- e . target . value = ""
11
- }
12
- }
13
-
14
- filter ( e ) {
15
- this . props . store . filter = e . target . value
16
- }
17
-
18
- toggleComplete ( todo ) {
19
- todo . complete = ! todo . complete
20
- }
21
-
22
5
render ( ) {
23
- const todos = this . props . store . filteredTodos . map ( todo => (
24
- < li key = { todo . id } >
25
- < input type = "checkbox" value = { todo . complete } onChange = { this . toggleComplete . bind ( this , todo ) } /> < span > { todo . value } </ span >
26
- </ li >
27
- ) )
28
-
29
- return (
30
- < div >
31
- < h1 > todos</ h1 >
32
- < input placeholder = "create new" onKeyPress = { this . create . bind ( this ) } />
33
- < input placeholder = "filter todos" value = { this . props . store . filter } onChange = { this . filter . bind ( this ) } />
34
- < ul > { todos } </ ul >
35
- < a href = "#" onClick = { this . props . store . clearComplete } > Clear Completed</ a >
36
- </ div >
37
- )
6
+ return < h1 > MobX< h1 >
38
7
}
39
8
}
Original file line number Diff line number Diff line change 1
- import mobx from "mobx"
2
- import { computed , observable } from "mobx"
3
-
4
- class Todo {
5
- @observable value
6
- @observable id
7
- @observable complete
8
-
9
- constructor ( value ) {
10
- this . value = value
11
- this . id = Date . now ( )
12
- this . complete = false
13
- }
14
- }
15
-
16
- export class TodoStore {
17
- @observable todos = [ ]
18
- @observable filter = ""
19
-
20
- @computed get filteredTodos ( ) {
21
- return this . todos . filter ( todo => ! this . filter || todo . value . toLowerCase ( ) . match ( this . filter . toLowerCase ( ) ) )
22
- }
23
-
24
- clearComplete = ( ) => {
25
- this . todos . replace ( this . todos . filter ( todo => ! todo . complete ) )
26
- }
27
-
28
- createTodo ( value ) {
29
- this . todos . push ( new Todo ( value ) )
30
- }
31
- }
32
-
33
- export default new TodoStore
34
-
Original file line number Diff line number Diff line change 1
1
import "../css/main.css"
2
2
import React from "react"
3
3
import ReactDOM from "react-dom"
4
- import TodoStore from "./TodoStore"
4
+
5
5
import TodoList from "./TodoList"
6
6
7
7
const app = document . getElementById ( "app" )
8
8
9
- ReactDOM . render ( < TodoList store = { TodoStore } /> , app )
9
+ ReactDOM . render ( < TodoList /> , app )
10
10
You can’t perform that action at this time.
0 commit comments