使用React实现TodoList实现增删改查

使用React实现TodoList实现增删改查

TodoList编写思路
React --》 组件 --》 3大属性（props，state，refs）

TODOList，数据增删改查的操作

思路：
1、UI界面怎么实现；UI（User Interface）

2、功能代码实现：

（1）添加数据

（2）查询数据，展示

（3）删除数据

（4）修改数据

3、数据持久化操作

localStorage.setItem('key',value)

var value = localStorage.getItem('key')

this.setState(obj,faction)，修改state属性的函数，参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据

setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新
【下面来看代码】

import React, { Component } from 'react'

export default class Todolist2 extends Component {
  //构造方法
  constructor(props){
    super(props);

    this.state = {
      list: [],  //展示列表
      inputValue:'' //记录输入框的值
    }
  }

  //加载时执行
  componentWillMount(){

     //从localStrong中获取myList
     var myList = window.localStorage.getItem('myList');
     if(myList==null || myList==''){
         myList = [];//初始化myList数组
     }else{
         myList = myList.split(',');
     }
 
     this.setState({
         list:myList
     });
  }

  按钮点击事件方法，添加方法
  handleBtnClick(){

    //在内存中添加
    this.setState({
        list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
        inputValue: '' //点击添加按钮，清空输入框
      },()=>{
        console.log(this.state.list);
        window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
      });

  }

  //输入框输入事件方法
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }

  //点击展示列表事件方法，用于删除展示元素
  handleItemClick(index){
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list: list
    },()=>{
        window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
    });

  }

  //键盘事件
  keyDown(e){

    if(e.keyCode == 13){
        this.handleBtnClick();
    }
   
  }

  //修改函数
  handleUpdate(index){

    //弹出输入框，用于填写新内容
    var rel = window.prompt('请输入新内容：');
    if(rel != null){
        this.state.list.splice(index,1,rel);
        this.setState({
            list:this.state.list
        },()=>{
            window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
        });
    }

  }

  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyDown={this.keyDown.bind(this)}></input>
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <div>
          {this.state.list.map((item,index) => {
            return <p key={index}>
                    {item}&nbsp;&nbsp;
                    <button onClick={this.handleUpdate.bind(this,index)}>修改</button>&nbsp;&nbsp;
                    <button onClick={this.handleItemClick.bind(this,index)}>删除</button>
                  </p>
          })}
        </div>

      </div>
    );
  }
}

【這隻是一個簡單的案例，也是老師剛教的，先理解一下再做些複雜完整的，到最後也對自己說聲加油！！！】