使用TodoList进行增删改查

编写TodoList思路：
React–> 组件–>三大属性(props,state,refs)

思路：
1.UI界面怎么实现；
2.功能代码实现：

• 添加数据
• 查询数据，展示
• 删除数据
• 修改数据

3.数据持久化操作
localStorage.setItem(‘Key’,value)
var value = localStorage.getItem(‘key’)

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

setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

代码如下
入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList /> , document.getElementById('root'));

主体文件TodoList.js

import React from 'react';

class TodoList extends React.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中
    });
c
  }

  //键盘事件
  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>
        <ul>
          {this.state.list.map((item,index) => {
            return <li key={index}>
                    {item}&nbsp;&nbsp;
                    <button onClick={this.handleUpdate.bind(this,index)}>修改</button>&nbsp;&nbsp;
                    <button onClick={this.handleItemClick.bind(this,index)}>删除</button>
                  </li>
          })}
        </ul>

      </div>
    );
  }

}

export default TodoList;