2017-hellojs_overflow-kaya

src/App.jsx

@@ -1,15 +1,42 @@
 import React from 'react'
 import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
+// import List from './List.jsx'
 
 class TodoApp extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      todos: []
+    }
+  }
+
+  addTodo(todo) {
+    let update_todos = this.state.todos.slice(0)
+    update_todos.push(todo)
+    // console.log('update_todos', update_todos)
+    this.setState({
+      todos: update_todos
+    })
+  }
+
+  deleteTodo(idx) {
+    let update_todos = this.state.todos.slice(0)
+    update_todos.splice(idx, 1)
+    this.setState({
+      todos: update_todos
+    })
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addTodo={this.addTodo.bind(this)} />
+        <TodoList todos={this.state.todos} deleteTodo={this.deleteTodo.bind(this)}/>
       </div>
-    );
+    )
+
   }
 }
 

src/List.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+class List extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            input_text: '',
+        }
+
+    }
+
+    onTextChange(evt) {
+        this.setState({
+            input_text: evt.target.value
+        })
+    }
+
+    render() {
+        const items = ['a', 'b', 'c', 'd', 'e']
+        return (
+            <div>
+                <input type="text"  
+                    value={this.state.input_text} 
+                    onChange={evt => this.onTextChange(evt)}/>
+            </div>
+        )
+    }
+}
+
+export default List

src/TodoAddForm.jsx

@@ -1,15 +1,32 @@
 import React from 'react'
 
 class TodoAddForm extends React.Component {
-  state = {
-    inputText: ''
+  constructor(props) {
+    super(props)
+    this.state = {
+      inputText: ''
+    }
   }
+
+  onTextChange(evt) {
+    this.setState({
+      inputText: evt.target.value
+    })
+  }
+
+  addText(evt) {
+    if (this.state.inputText !== ''){
+      const { addTodo } = this.props
+      addTodo(this.state.inputText)
+    }
+  }
+
 
   render() {
     return (
       <div>
-        <input type="text" value={this.state.inputText}/>
-        <button>新增</button>
+        <input type="text" value={this.state.inputText} onChange={evt => this.onTextChange(evt)}/>
+        <button onClick={evt => this.addText(evt)}>新增</button>
       </div>
     );
   }

src/TodoItem.jsx

@@ -1,10 +1,25 @@
 import React from 'react'
 
 class TodoItem extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
   render() {
+    // const {todos, deleteTodo} = this.props
+    const todos = this.props.todos
+    const deleteTodo = this.props.deleteTodo
     return (
       <div>
-
+        {
+          todos.map((item, idx) => {
+            return (
+              <div key={idx}>
+                <li>{item}<button onClick={evt => deleteTodo(evt)}>X</button></li>
+              </div>
+            )
+          })
+        }
       </div>
     );
   }

src/TodoList.jsx

@@ -2,10 +2,16 @@ import React from 'react'
 import TodoItem from './TodoItem.jsx'
 
 class TodoList extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
   render() {
+    // const todos = this.props.todos
+    const {todos, deleteTodo} = this.props
     return (
       <div>
-
+        <TodoItem todos={todos} deleteTodo={deleteTodo}/>
       </div>
     );
   }