TodoList案例

我们今天模仿ToDoList进行一个简单的增，删，改，查的操作

可参考官网  http://www.todolist.cn/

下边直接上代码

 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;

我们看一下效果