TodoList代码优化

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

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

    //箭头函数可以改变this的指向问题：在箭头函数中函数在哪定义的 this就指向谁
    //也就是class
    //将函数改为：赋值语句+箭头函数的形式
    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;