From 07ad627140bca76102273353baa1cbb2770caf13 Mon Sep 17 00:00:00 2001
From: Jolin Tsai <jolintsai@Jolinde-MacBook-Pro.local>
Date: Tue, 22 Aug 2017 21:21:45 +0800
Subject: [PATCH] react 1st commit

---
 src/App.jsx         | 16 +++++++++++++++-
 src/TodoAddForm.jsx | 20 ++++++++++++++++----
 src/TodoItem.jsx    | 13 ++++++++++++-
 src/TodoList.jsx    |  9 ++++++++-
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c869b09..e41ae79 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,11 +3,25 @@ import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
 class TodoApp extends React.Component {
+  state = {
+    todos:[],
+  }
+  addTodo = (val) =>{
+    this.state.todos.push(val);
+    this.setState({todos:this.state.todos});
+  }
+  removeTodo = (id) => {
+    this.state.todos.splice(id,1);
+    this.setState({todos:this.state.todos});
+  }
+
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+          <TodoAddForm todos={this.state.todos} addTodo={this.addTodo}/>
+          <TodoList todos={this.state.todos} removeTodo={this.removeTodo}/>
       </div>
     );
   }
diff --git a/src/TodoAddForm.jsx b/src/TodoAddForm.jsx
index fbf6003..0e68251 100644
--- a/src/TodoAddForm.jsx
+++ b/src/TodoAddForm.jsx
@@ -1,15 +1,27 @@
 import React from 'react'
 
 class TodoAddForm extends React.Component {
-  state = {
-    inputText: ''
+  constructor(props){
+    super(props)
+    this.state = {
+      inputText: ''
+    }
   }
   
+  handleChange= (event)=> {
+    this.setState({inputText: event.target.value});
+  }
+  
+  addTodo = () =>{
+    this.props.addTodo(this.state.inputText);
+    this.setState({inputText:''});
+  }
+
   render() {
     return (
       <div>
-        <input type="text" value={this.state.inputText}/>
-        <button>新增</button>
+        <input type="text" value={this.state.inputText} onChange={this.handleChange}/>
+        <button onClick={this.addTodo}>新增</button>
       </div>
     );
   }
diff --git a/src/TodoItem.jsx b/src/TodoItem.jsx
index 170af86..ae49077 100644
--- a/src/TodoItem.jsx
+++ b/src/TodoItem.jsx
@@ -1,10 +1,21 @@
 import React from 'react'
 
 class TodoItem extends React.Component {
+  constructor(props){
+    super(props)
+  }
+  removeTodo = () => {
+    this.props.removeTodo(this.props.position);
+    console.log(this.props.position);
+  }
+  
   render() {
     return (
       <div>
-        
+        <ul>
+          <li><span style={{fontSize:22}}>{this.props.todo}</span>
+          <img style={{width:18,height:18}} src={"http://findicons.com/files/icons/573/must_have/48/delete.png"} onClick={this.removeTodo}/></li>
+        </ul>  
       </div>
     );
   }
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index d588dc4..fdde84a 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -2,10 +2,17 @@ import React from 'react'
 import TodoItem from './TodoItem.jsx'
 
 class TodoList extends React.Component {
+  constructor(props){
+    super(props)
+  }
   render() {
     return (
       <div>
-        
+         {this.props.todos.map((todo,i)=>{
+           return(
+            <TodoItem todo={todo} key={i} position={i} removeTodo={this.props.removeTodo}/>
+          );
+        })}
       </div>
     );
   }