实现todolist新增删除

import React from 'react';
import { Component, Fragment } from 'react'

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:"",
            list:[]
        }
    }
    render(){
        return (
            <Fragment>
                   <input 
                   type="text" 
                   value={this.state.inputValue} 
                   onChange={this.handleInputChange.bind(this)} 
                   /> <button onClick={this.handleButtonClick.bind(this)}>提交</button>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return <li 
                        key={index}
                        onClick={this.handleItemDelete.bind(this,index)}
                        >
                         {item}
                        </li>
                    })
                }
            </ul>
            </Fragment>
        )
    }
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
            // list:[list...,e.target.value]
        })
    }

    handleButtonClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            //...this.state.list es6展开运算符。a=[1,2,3], ...a 它会吧a展开为 1,2,3
            inputValue:""
        })
    }

    handleItemDelete(index){
        const list = [...this.state.list];//先拷贝一份
        //this.state.list.splice(index,1) 这种写法是错误的
        //react有一个概念叫inmutable：state不允许我们做任何的改变，如果非要改，我们可以拷贝一个副本
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}

export default TodoList;