Reactを使用して、単純な入力ボックスの追加、削除、および変更操作を実装するにはどうすればよいですか？

import React, {
    
     Component } from 'react'
class App extends Component {
    
    

    //首先先写他的构造方法（构造函数）
    constructor(){
    
    
        //super:继承
        super()

        this.state = {
    
    
            inputValue: '',
            list : []
        }

    }
    //input框输入事件
    // 通过事件源的方式拿到输入框内的输入的值
    // 所有的事件都有默认参数 event(事件)，事件上有一个事件属性(target)
    handelInput(event){
    
    
                            // 使用setState方法修改输入框内的值
        this.setState({
    
    
            inputValue :event.target.value
    })}

    //添加事件
    handelAdd(){
    
    
        //通过添加事件可以拿到输入框中的值
        // console.log(this.state.inputValue)
        // 由于我们需要动态的往里面添加值，那么该怎么修改？
            //1.获取list的副本
            let list = this.state.list
            //先判断目前输入框中的内容是否为空，如果为空的话就什么也不返回
            if(this.state.inputValue.trim() === ''){
    
    
                return
            }else{
    
    
                //如果输入框内内容不为空的话将输入框内的值后增到list副本中
                list.push(this.state.inputValue)
            }
            // 2.修改state数据
            this.setState({
    
    
                inputValue :'',
                //用这个副本的list去替换掉构造方法中的list
                list
            })
            
    }
    // 删除事件
    handelDel(index){
    
    
        //1.获取list的副本
        let list = this.state.list
        list.splice(index,1)
        // console.log(index);
        // 2.修改state数据
        this.setState({
    
    
            //用这个副本的list去替换掉构造方法中的list
            list
        })
        
    }
    //修改事件
    handelUpdate(index){
    
    
        //让用户输入一个修改后的值
        let val = window.prompt('请输入修改后的值：')
        if(val.trim() === ''){
    
    
            return
        }
        //1.获取list的副本
        let list = this.state.list
        list.splice(index,1,val)
        // 2.修改state数据
        // console.log(index);
        this.setState({
    
    
            //用这个副本的list去替换掉构造方法中的list
            list
        }) 
    }
    render() {
    
    
        return (
            <div>
                {
    
    /* 这个是将inputValue中的值可以显示在input中 */}
                {
    
    /* onInput 输入事件 */}
                <input value={
    
    this.state.inputValue}
                    onInput={
    
    this.handelInput.bind(this)}
                    //键盘按下事件，当按下Enter的时候执行添加方法
                    onKeyDown={
    
     e=>{
    
    
                            if(e.code === 'Enter'){
    
    
                                this.handelAdd()
                            }
                        }}
                >
                    
                </input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={
    
    this.handelAdd.bind(this)}>添加</button>
                <ul>
                    {
    
    /* 通过遍历的方式将list中的元素放在li中并且展示出来 */}
                    {
    
    this.state.list.map((item,index)=>{
    
    
                        return (<li key={
    
    index} style={
    
    {
    
    margin :'10px 0px'}}>
                            {
    
    item} &nbsp;&nbsp;&nbsp;

                            <button onClick={
    
    this.handelUpdate.bind(this,index)}>修改</button>&nbsp;&nbsp;&nbsp;
                            
                            <button onClick={
    
    this.handelDel.bind(this,index)}>删除</button>&nbsp;&nbsp;&nbsp;
                        </li>)
                    })}
                </ul>
            </div>
        )
    }
}

export default App