React 实现表格添加删除，修改

这里使用的.html后缀，并且是类组件

import React from 'react'
import "./UL.css"
class ULdata extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name:"",
            index:'',
            list:[
                {
                    id:1,
                    name:"琪琪"
                },
                {
                    id:2,
                    name:"慧慧"
                },
                {
                    id:3,
                    name:"佳佳"
                },
                {
                    id:4,
                    name:"乐乐"
                },
                {
                    id:5,
                    name:"欣欣"
                },
                {
                    id:6,
                    name:"豆豆"
                }
            ]
        }
    }
    //删除
    del(index){
        this.setState(
            this.state.list.splice(index,1)
        )
    }
    //更改Iput框的值--需要用到箭头函数
    Changename=(e)=>{
        console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    //添加
    add(){
        //输入框非空校验---修改添加都需要使用非空校验
        if(this.state.name==""){
            alert("请输入值")
            return
        }

        //有下标的情况说明是修改，所以这里做一个判断
        if(this.state.index!==""){
            //根据下标找到值，并值进行更改
            this.state.list[this.state.index].name=this.state.name
            //相应
            this.setState({ list:this.state.list })
        }else{
            //结构声名新的数组
            const _list =[...this.state.list]
            //数组实现追加
            _list.unshift({ id:_list.length+1, name:this.state.name })
            // 将新值赋给旧值
            this.setState({ list:_list })
        }
        //清空输入框
        this.state.name=''
    }
    //修改--传递下标，并将下标存在State里面---，然后将选中的数据进行回显
    modification(val,index){
        this.setState({
            name:val.name,
            index
        })
    }

    //查询----查询待优化，只能查询一次
    inquire(){
        console.log(this.state.name=="","输入框结果");
        if(this.state.name==""){
        console.log(this.state.list,"输入框为空的时候的数组");
            this.setState({
                // 将新值赋给旧值WW
                list:this.state.list
            }) 
        }else{
            let arr=[]
            for(let i=0; i< this.state.list.length; i++){
                if(this.state.list[i].name.indexOf(this.state.name)>=0){
                    arr.push(this.state.list[i])
                }
            }
            //数组实现追加
             this.setState({
                 // 将新值赋给旧值WW
                 list:arr 
             })
        } 
        console.log(this.state.list,"有数据查询后的数组");

    }
    render() {
        return (
            <div className='body'>
                <div className='input_body'>
                    <input type="text" placeholder='请输入姓名' value={this.state.name} onChange={this.Changename} />
                    <button onClick={()=>this.add()}>{this.state.index!==""? "确认修改":"添加"}</button>
                    <button onClick={()=>this.inquire()}>查询</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{ 
                        return <li key={item.id}>
                                <p>{index+1}</p>
                                <p className='pbox'> {item.name}</p>
                                <button onClick={()=>this.del(index)}>删除</button>
                                <button onClick={()=>this.modification(item,index)}>修改</button>
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
export default ULdata