2017-chu-jolintsai1215

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>
     );
   }

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>
     );
   }

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>
     );
   }

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>
     );
   }