import React from 'react';

 class App extends  React.Component{

   //构造函数

   constructor(){

     super()

     this.state={

       arry:[], //展示列表

       str:''   //记录输入框的值

     }

   };

   //加载时对数组进行操作

   componentWillMount(){

      // 获取本地数据赋值给myArry

     var myArry= window.localStorage.getItem('myArry')

      //判断myArry是否是空的,如果myArry是空的，就让它等一个空数组

     if(myArry == null || myArry ==''){

       myArry=[]

       //如果myArry不是空的，拿到的数据是字符串需要通过split进行转换成数组

     }else{

       myArry = myArry.split(',')

     }

   this.setState ({

     //转换过的数组赋值给arry

     arry:myArry

 })

   };

   //按钮点击事件方法

   btn(){

     var val = this.refs.val.value;

     if(this.refs.val.value ===''){

       alert("请输入")

     }else{

     this.setState({

        //运用扩展运算符添加数据到arry

       arry:[...this.state.arry,val]

     },function(){

       // 更新本地数据

       window.localStorage.setItem('myArry',this.state.arry)

     })

     }

     // 输入框值清空

     this.refs.val.value='';

   }

   render(){

       return(

         <React.Fragment>

           <input type='text' ref='val' onKeyDown={(e)=>{

             //键盘事件

             if(e.keyCode===13){

               // 调用上面添加的函数

                this.btn()

             }

           }} />

           <button onClick={this.btn.bind(this)}>提交</button>

           <ul>

             {/* 对数组进的遍历渲染 */}

              {this.state.arry.map((m,i)=>{

                return(

     //  key属性为唯一值，没有该属性，浏览器会报警告信息，在做添加操作时会出bug

                <li key={i}>{m} &nbsp;&nbsp;

                <button onClick={()=>{

                  //通过prompt弹框获取要修改的内容

                  var prompt = window.prompt()

                 // 判断是不是确认修改

                  if(prompt != null){

                    var list = this.state.arry

                   //在arry数组中找到下标i设置修改个数为1，修改的内容为list

                    list.splice(i,1,prompt)

                    this.setState({

                   //修改过后把list值重新赋给arry

                      arry:list

                    },function(){

                     window.localStorage.setItem('myArry',this.state.arry)

                    })

                  }

                }}>修改</button>&nbsp;&nbsp;&nbsp;

                <button onClick={()=>{

                 //  对数组进行截取下标为i  删除个数为1

                 this.state.arry.splice(i,1)

                 this.setState({

                    //截取过后把list值重新赋给arry

                   arry:this.state.arry

                 },function(){

                   window.localStorage.setItem('myArry',this.state.arry)

                 })

                }}>删除</button>

                </li>

                )

                })}

           </ul>

         </React.Fragment>

       )

     }

 }

 export default App;