2017-chu-kmgs4524

src/App.jsx

@@ -2,12 +2,34 @@ import React from 'react'
 import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
+const todos = [];
+
 class TodoApp extends React.Component {
+  state = {
+    todos: []
+  }
+
+  addTodo = (val) => {
+    this.setState({
+      todos: this.state.todos.concat(val),
+    });
+    console.log(this.state);
+  }
+
+  deleteTodo = (index) => {
+    console.log('index:', index);
+    console.log(this.state.todos.splice(index, 1)); //Array.splice(start, deleteCount) return an array containing the deleted elements
+    this.setState({
+      todos: this.state.todos
+    });
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addTodo={this.addTodo} />
+        <TodoList todos={this.state.todos} delTodo={this.deleteTodo} />
       </div>
     );
   }

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: '' };
   }
 
+  handleChange = (e) => {
+    this.setState({
+      inputText: e.target.value
+    });
+    console.log('input value', e.target.value);
+    console.log('inputText', this.state.inputText);
+  }
+
+  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 {
+
+  deleteTodo = () => {
+    this.props.delTodo(this.props.index);
+    //console.log('TodoItem index:', this.props.index);
+  };
+
   render() {
     return (
       <div>
-
+          <li>{this.props.value}<button onClick={this.deleteTodo}>Delete</button></li>
       </div>
     );
   }

src/TodoList.jsx

@@ -5,7 +5,9 @@ class TodoList extends React.Component {
   render() {
     return (
       <div>
-
+        {this.props.todos.map((value, index) => (
+          <TodoItem key={index} index={index} value={value} delTodo={this.props.delTodo} />
+        ))}
       </div>
     );
   }