From 973aaec08c6a4bcdb0d7e13d3b5438faa4bc35ad Mon Sep 17 00:00:00 2001
From: Lavit <lb01640000@gmail.com>
Date: Thu, 17 Aug 2017 05:40:33 +0000
Subject: [PATCH] study

---
 server.js           |  2 +-
 src/App.jsx         | 25 +++++++++++++++++++++++--
 src/TodoAddForm.jsx | 27 ++++++++++++++++++++++++---
 src/TodoItem.jsx    | 13 +++++++++++--
 src/TodoList.jsx    | 14 ++++++++++++--
 5 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/server.js b/server.js
index 679d8bc..38ff3c7 100644
--- a/server.js
+++ b/server.js
@@ -1,7 +1,7 @@
 const express = require('express');
 const webpack = require('webpack');
 const webpackCompiler = webpack(require('./webpack.config.js'));
-const port = 3000;
+const port = 3001;
 
 const app = express();
 
diff --git a/src/App.jsx b/src/App.jsx
index c869b09..7069213 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,34 @@
 import React from 'react'
 import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
-
+// 努力的把程式讀懂 .. 但寫不出來
 class TodoApp extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    list: ['起床','刷牙']
+  }
+
+  removeElement = (idx) => {
+
+    this.state.list.splice(idx,1);
+    this.setState({...this.state});
+  }
+
+  addElement = (text) => {
+    this.state.list.push(text);
+    this.setState({...this.state});
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addElement={this.addElement} />
+        <TodoList list={this.state.list} removeElement={this.removeElement} />
       </div>
     );
   }
diff --git a/src/TodoAddForm.jsx b/src/TodoAddForm.jsx
index fbf6003..5e3e886 100644
--- a/src/TodoAddForm.jsx
+++ b/src/TodoAddForm.jsx
@@ -1,15 +1,36 @@
 import React from 'react'
 
 class TodoAddForm extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
   state = {
     inputText: ''
   }
-  
+
+  handleChange = (event) => {
+    this.setState({ ...this.state, inputText: event.target.value })
+  }
+
+  handleClick = (event) => {
+    // pass userinput to the parent component
+    this.props.addElement(this.state.inputText);
+    // clear userinput
+    this.setState({ ...this.state, inputText: "" });
+    // focus on input
+    this.nameInput.focus();
+  }
+
+  componentDidMount() {
+    this.nameInput.focus();
+  }
+
   render() {
     return (
       <div>
-        <input type="text" value={this.state.inputText}/>
-        <button>新增</button>
+        <input ref={(input) => { this.nameInput = input; }} type="text" value={this.state.inputText} onChange={this.handleChange} />
+        <button onClick={this.handleClick}>新增</button>
       </div>
     );
   }
diff --git a/src/TodoItem.jsx b/src/TodoItem.jsx
index 170af86..debad4d 100644
--- a/src/TodoItem.jsx
+++ b/src/TodoItem.jsx
@@ -1,10 +1,19 @@
 import React from 'react'
 
 class TodoItem extends React.Component {
+  constructor(props){
+    super(props)
+  }
+
+  handleClick = (event) => {
+    this.props.removeElement(this.props.idx);
+  }
+  
   render() {
     return (
-      <div>
-        
+      <div style={{marginTop:"5px"}}>
+        <button onClick={this.handleClick}> 刪除 </button>
+        <a style={{marginLeft:"5px"}}>{this.props.text}</a>
       </div>
     );
   }
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index d588dc4..1ee1b36 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -2,10 +2,20 @@ import React from 'react'
 import TodoItem from './TodoItem.jsx'
 
 class TodoList extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
   render() {
     return (
-      <div>
-        
+      <div style={{marginTop:"15px"}}>
+        {
+          this.props.list.map(
+            (ele, index, array) => {
+              return (<TodoItem text={ele} idx={index} key={index} removeElement={this.props.removeElement}/>);
+            }
+          )
+        }
       </div>
     );
   }