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;

我們看一下效果