import React, { Component } from 'react';


class ToDoList extends Component{
      constructor(props){
        super(props);
        this.state={list:[1,2,3]};
        this.HandleChange=this.HandleChange.bind(this);
      }

      HandleChange(todo){
        var rows=this.state.list;
        rows.push(todo);
        this.setState(
            {list:rows}
        );
      }
      render(){
        return (
            <div>
                 <TodoNew onAdd={this.HandleChange} />
                 <ListTodo todo={this.state.list}  />
            </div>
          );
      }
      
};

class TodoNew extends Component{
      constructor(props){
        super(props);
        this.state={inputText:''};
      }
      addTodo(e){
        if(this.state.inputText){
        this.props.onAdd(this.state.inputText);
        }
      }
      changeInput(e){
        this.setState({inputText:e.target.value});  
      }
     render () {
        return (
            <div>
                <input type="text" onChange={this.changeInput.bind(this)}/>
                <button onClick={this.addTodo.bind(this)} >添加事项</button>
            </div>
        );
    }
}

class ListTodo extends Component{
    render(){
      var  list=this.props.todo;
      const listItems = list.map((item,index) =>
      <li key={index.toString()}>
      {item.toString()}
      </li>
      );

      return (
       <ul>{listItems}</ul>
      );
    }
}

export default ToDoList;
@@ -149,17 +149,12 @@
 st:%5B
-1,2,3
 %5D%7D;%0A
+
     
@@ -201,24 +201,80 @@
 bind(this);%0A
+        this.HandleDelete=this.HandleDelete.bind(this);%0A
       %7D%0A%0A   
@@ -417,24 +417,169 @@
  );%0A      %7D%0A
+      %0A      HandleDelete(index)%7B%0A          this.state.list.splice(index, 1);%0A          this.setState(%7Blists: this.state.lists%7D);%0A      %7D%0A      %0A
       render
@@ -722,16 +722,46 @@
 e.list%7D 
+deleteList=%7Bthis.HandleDelete%7D
  /%3E%0A    
@@ -1402,24 +1402,250 @@
  Component%7B%0A
+    %0A    constructor(props)%7B%0A      super(props);%0A      this.handleDelete=this.handleDelete.bind(this);%0A    %7D%0A    handleDelete(e)%7B%0A           var index=e.target.getAttribute(%22id%22)%0A           this.props.deleteList(index);%0A    %7D%0A
     render()
@@ -1679,16 +1679,17 @@
 s.todo;%0A
+%0A
       co
@@ -1729,16 +1729,23 @@
 dex) =%3E%0A
+      %0A
       %3Cl
@@ -1793,16 +1793,92 @@
 tring()%7D
+%7B%22   %22%7D%3Cbutton id=%7Bindex.toString()%7D onClick=%7Bthis.handleDelete%7D%3E%E5%88%A0%E9%99%A4%3C/button%3E
 %0A      %3C
@@ -1881,16 +1881,24 @@
    %3C/li%3E
+ %0A      
 %0A      )
@@ -1958,19 +1958,21 @@
 ;%0A    %7D%0A
-
 %7D%0A%0A
+%0A%0A
 export d

add delete feature