Recat-TodoList

1.UI界面实现

 render(){
      return(
    <React.Fragment>
       <div>
             //input输入框
          <input type="text" onChange={this.myinput.bind(this)} value={this.state.inputValue}  onKeyDown={this.keyDown.bind(this)} ></input>
             //提交
          <button onClick={this.addclick.bind(this)}>提交</button>
       </div><br></br>
       
       <div>
            //表格
           <table border="1px" cellSpacing="0px" cellPadding="1px"> 
           //map方法遍历
           {this.state.list.map((item,index)=>{ 
           return (
           <tr key={index} > 
           <td width="116px">{item} </td>
           <td><button onClick={this.handleUpdate.bind(this,index)}>修改</button></td>
           <td><button onClick={this.handleDelClick.bind(this,index)}>删除</button></td>
           </tr>
           )
           })};
            </table>
       </div>
    </React.Fragment>)
};

UI所用事件汇总：

• onchange 监听input输入框中的value
• onkeydown 键盘事件当用户按下键盘是发生
• onclick 用户点击按钮时发生

2.功能代码实现

2.1~添加数据

  addclick(){
           this.setState({
               list:[...this.state.list,this.state.inputValue],
                inputValue:""
            },()=>{window.localStorage.setItem('myList',this.state.list)})
     }

• "…"为展开运算符，将this.state.list内容放到当前的list中。
• inputValue：" ",点击提交按钮后，清空输入框中的数据。

2.2~删除数据

 handleDelClick(index){
         var info=window.confirm('确定要删除此内容吗？')
         var list=[...this.state.list];
         if(info !=false){
          list.splice(index,1);
         this.setState({
             list:list
         },()=>{window.localStorage.setItem('myList',this.state.list)})
        }
     }

• Window对象confirm()方法显示带有一段消息以及确认按钮和取消按钮的对话框。
• 数组中的splice方法splice（index，n）
• index:索引；n:删除数据个数

2.3~修改数据

 handleUpdate(index){
         var msg=window.prompt('请输入新内容');
         if(msg !=null){
             this.state.list.splice(index,1,msg);
             this.setState({
                 list:this.state.list
             },()=>{window.localStorage.setItem('myList',this.state.list)});
         }
     }

• Window对象prompt()方法用于显示可提示用户进行输入的对话框。
• 利用数组中splice()方法 splice(index，n,val)
  index:索引;val:更新的数据；

2.3~Enter提交

keyDown(e){
         if(e.keyCode==13){
             this.addclick()
         }
     }

• Enter键值为13
• 调用添加数据函数addClick（）

3.数据持久化操作

//页面第一次 加载时执行
  componentWillMount(){             

     //从localStrong中获取myList
     var myList = window.localStorage.getItem('mList');
     if(myList==null || myList==''){
         myList = [];//初始化myList数组
     }else{
     //用逗号分隔将字符串转化为数组
         myList = myList.split(',');
     }
 
     this.setState({
         list:myList
     });
  }

• 读取数据语法
  localStorage.setItem(‘key’,value)
• 保存数据语法
  var value = localStorage.getItem(‘key’)
• 修改state属性的函数
  this.setState(obj,faction)
  参数1是要更新的数据对象，参数2是回调函数，
  参数2的主要作用是，用于展示更新后的state数据
• setState()方法是异步方法
  如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

Todolist.js

 import React from 'react';
 class Todolist extends React.Component{
     constructor(){
         super();
         this.state={
             list:[],
           
         }
     }
     //页面加载时执行
     componentWillMount(){
         var myList=window.localStorage.getItem('myList')
         if(myList==null || myList==''){
          myList=[];
         }else{
             myList=myList.split(',')
         }
    
        this.setState({
            list:myList
        });
    }
     addclick(){
           this.setState({
               list:[...this.state.list,this.state.inputValue],
                inputValue:""
            },()=>{window.localStorage.setItem('myList',this.state.list)})
     }
    //  输入框 onchange
     myinput(v){
         this.setState({
             inputValue:v.target.value
         })
     }
     handleDelClick(index){
         var info=window.confirm('确定要删除此内容吗？')
         var list=[...this.state.list];
         if(info !=false){
          list.splice(index,1);
         this.setState({
             list:list
         },()=>{window.localStorage.setItem('myList',this.state.list)})
        }
     }
     keyDown(e){
         if(e.keyCode==13){
             this.addclick()
         }
     }
     handleUpdate(index){
         var msg=window.prompt('请输入新内容');
         if(msg !=null){
             this.state.list.splice(index,1,msg);
             this.setState({
                 list:this.state.list
             },()=>{window.localStorage.setItem('myList',this.state.list)});
         }
     }
    
  render(){
      return(
    <React.Fragment>
       <div>
        <input type="text" onChange={this.myinput.bind(this)} value={this.state.inputValue}  onKeyDown={this.keyDown.bind(this)} ></input>
        {/* <input type="text" ref="myinput"></input> */}
        <button onClick={this.addclick.bind(this)}>提交</button>
       </div><br></br>
       <div>
           <table border="1px" cellSpacing="0px" cellPadding="1px"> 
      {this.state.list.map((item,index)=>{ 
      return (
      <tr key={index} > 
      <td width="116px">{item} </td>
     <td> <button onClick={this.handleUpdate.bind(this,index)}>修改</button></td>
     <td> <button onClick={this.handleDelClick.bind(this,index)}>删除</button></td>
      </tr>
      )
      })}
           </table>
       </div>
    </React.Fragment>)
}
 }
 export default Todolist;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './Todolist'
ReactDOM.render(<TodoList />,document.getElementById('root'))

效果图