From c98d0d5c85c9a7145353a689b4ae5b0e23489a2f Mon Sep 17 00:00:00 2001
From: FuYaoDe <dan82625@gmail.com>
Date: Thu, 5 Oct 2017 22:56:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx         | 17 ++++++++++++++++-
 src/TodoAddForm.jsx | 14 ++++++++++++--
 src/TodoItem.jsx    |  3 ++-
 src/TodoList.jsx    |  6 +++++-
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c869b09..601747e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,11 +3,26 @@ import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
 class TodoApp extends React.Component {
+  state = {
+    todos: [],
+  }
+  addTodo = (data) => {
+    let todos = [...this.state.todos, data]
+    this.setState({ todos })
+  }
+
+  removeTodo = (index) => {
+    let todos = [...this.state.todos];
+    todos.splice(index, 1);
+    this.setState({ todos });
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addTodo={this.addTodo} />
+        <TodoList removeTodo={this.removeTodo} todos={this.state.todos}/>
       </div>
     );
   }
diff --git a/src/TodoAddForm.jsx b/src/TodoAddForm.jsx
index fbf6003..699b3a1 100644
--- a/src/TodoAddForm.jsx
+++ b/src/TodoAddForm.jsx
@@ -4,12 +4,22 @@ class TodoAddForm extends React.Component {
   state = {
     inputText: ''
   }
+
+  onChange = (event) => {
+    this.setState({
+      inputText: event.target.value,
+    });
+  }
+
+  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={this.onChange}/>
+        <button onClick={this.addTodo}>新增</button>
       </div>
     );
   }
diff --git a/src/TodoItem.jsx b/src/TodoItem.jsx
index 170af86..5351773 100644
--- a/src/TodoItem.jsx
+++ b/src/TodoItem.jsx
@@ -4,7 +4,8 @@ class TodoItem extends React.Component {
   render() {
     return (
       <div>
-        
+        <button onClick={this.props.remove}>刪除</button>
+        {this.props.data}
       </div>
     );
   }
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index d588dc4..161c9a0 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -5,7 +5,11 @@ class TodoList extends React.Component {
   render() {
     return (
       <div>
-        
+        {
+          this.props.todos.map((data, index) => {
+            return <TodoItem data={data} remove={() => this.props.removeTodo(index)}/>
+          })
+        }
       </div>
     );
   }

From 50e18908e0fbdca504b671cc01ef0abf6e22b06c Mon Sep 17 00:00:00 2001
From: FuYaoDe <dan82625@gmail.com>
Date: Fri, 6 Oct 2017 02:35:27 +0800
Subject: [PATCH 2/2] list add default

---
 src/TodoList.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index 161c9a0..aefb6bb 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -14,5 +14,8 @@ class TodoList extends React.Component {
     );
   }
 }
+TodoList.defaultProps = {
+  todos: [1,2,3,4,5,6]
+}
 
 export default TodoList;
\ No newline at end of file