react实现一个todolist

import React, { Component } from "react";
export default class todoList extends Component {
    constructor(props) {        
    super(props);        
    this.state = {            
    list: ['11111','22222','33333'],            
    inputValue: ''
    }    
}    
// 添加功能    
handleAdd() {        
this.setState({            
    list: [...this.state.list, this.state.inputValue],            
    inputValue: ''        
    })    
}    
// input改变获取值    
handleChange(e) {        
    this.setState({            
    inputValue: e.target.value,        
    })    
}    
// 删除    
handleDel(index) {       
 //console.log(index);        
const newList = [...this.state.list];        
newList.splice(index, 1);        
    this.setState({            
    list: newList        
    })    
}    
render() {        
    return (            
        <div>               
        <input onChange={this.handleChange.bind(this)}                    
            value={this.state.inputValue}                
        />               
        <button onClick={this.handleAdd.bind(this)} >添加</button>                
        <ul>                    
            {                        
                this.state.list.map((item, index) => {                            
                    return <li  key={index}>                                
                            {item}                                
                            <span style={{ marginLeft: "20px" }}                                    
                            onClick={this.handleDel.bind(this, index)}                                
                            >删除</span>                            
                           </li>                        
                })                    
            }                
        </ul>            
        </div>        
    )    
}}