react todolist代码优化

Todolist.js

import React, { Component,Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';
class Todolist extends Component {
    constructor(props) { //最优先执行的函数
        super(props);
        this.state={
            inputValue:'',
            list:[]
        }
        this.handleinputChange=this.handleinputChange.bind(this);
        this.handlebuttonClick=this.handlebuttonClick.bind(this);
        this.handleItemdelt=this.handleItemdelt.bind(this);
    }
    render() {
        return (
            <Fragment>
                <div>
                    {/*这是一个todolist*/}
                    <label htmlFor='insertArea'>输入内容</label>
                    <input
                        id="insertArea"
                        className='input'
                        value={this.state.inputValue}
                        onChange={this.handleinputChange}
                    />
                    <button onClick={this.handlebuttonClick}> 提交 </button>
                </div>
                <ul>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        );
    }
    getTodoItem(){
        return this.state.list.map((item,index)=>{
            return(
                    <TodoItem
                        key={index}
                        index={ index }
                        item={ item }
                        deleteItem={this.handleItemdelt}
                    />
                )
        })
    }
    handleinputChange(e){
        const value=e.target.value;
        this.setState(()=>({
            inputValue:value
        }));
        // this.setState({
        //     inputValue:e.target.value
        // })
    }
    handlebuttonClick(e){
        this.setState((prevState)=>{
            return{
                list:[...prevState.list,prevState.inputValue],
                inputValue:''
            }
        });
        // this.setState({
        //     list:[...this.state.list,this.state.inputValue],
        //     inputValue:''
        // })
    }
    handleItemdelt(index){
        // immutable
        // state 不允许我们坐任何的改变
        this.setState((prevState)=>{
            const list=[...prevState.list];
            list.splice(index,1);
            return{list}
        })
        // const list=[...this.state.list];   // list的一个副本
        // list.splice(index,1);
        // this.setState({
        //     list:list
        // })
    }
}
export default Todolist;

TodoItem.js

import React ,{ Component } from 'react';
class TodoItem extends Component{
    constructor(props){
        super(props);
        this.handleclick=this.handleclick.bind(this);
    }
    render(){
        const { item }=this.props;
        return (<li
            onClick={this.handleclick}
            dangerouslySetInnerHTML={{__html:item}}
            ></li>
            )
    }
    handleclick(){
        const {deleteItem,index}=this.props;
        deleteItem(index);
    }
}
export default TodoItem;