2017-ncueie-isomorphic

src/App.jsx

@@ -3,11 +3,32 @@ import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
 class TodoApp extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    list: ['DefauleItem1','DefauleItem2']
+  }
+
+  removeElement = (idx) => {
+    //不想用setState所以用forceUpdate
+    this.state.list.splice(idx,1);
+    this.forceUpdate();
+  }
+
+  addElement = (text) => {
+    this.state.list.push(text);
+    this.forceUpdate();
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addElement={this.addElement} />
+        <TodoList list={this.state.list} removeElement={this.removeElement} />
       </div>
     );
   }

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

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

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