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;

我们看一下效果