'HW-0810'

src/App.jsx

@@ -3,11 +3,23 @@ import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
 class TodoApp extends React.Component {
+  state = {
+    todos:[]
+  }
+  addToDo = (go) =>{
+    this.setState({todos:this.state.todos.concat(go)});
+    console.log(this.state);
+  }
+  deleteToDo = (away) =>{
+    this.state.todos.splice(away,1);
+    this.setState({todos:this.state.todos});
+  } 
   render() {
     return (
       <div>
-        <h2>Todo App</h2>
-        123
+        <h2>Todo App之我不會只能參考助教的</h2>
+        <TodoAddForm  addToDo={this.addToDo}/>
+        <TodoList todos={this.state.todos} deleteToDo={this.deleteToDo}/>
       </div>
     );
   }

src/TodoAddForm.jsx

@@ -1,15 +1,24 @@
 import React from 'react'
 
 class TodoAddForm extends React.Component {
-  state = {
-    inputText: ''
+  constructor(props){
+    super(props)
+    this.state = {
+      inputText: ''
+    };
+  }
+  handleChange = (E) => {
+    this.setState({inputText: E.target.value});
+  }
+  addToDo = (E) =>{
+    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,16 @@
 import React from 'react'
 
 class TodoItem extends React.Component {
+  constructor(props){
+    super(props)
+  }
+  deleteToDo = ()=> {
+    this.props.deleteToDo(this.props.position);
+  };
   render() {
     return (
       <div>
-
+        <span>{this.props.value}</span><button onClick={this.deleteToDo}>刪除</button>
       </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    value={todo} deleteToDo={this.props.deleteToDo} />
+          );
+        })}
       </div>
     );
   }