react实现todolist 增删改查

react实现todolist 增删改查

实现需求：todolist实现增删改查；

实现思路：react组件划分。因为用的是localstorage封装了数据库各个组件之间数据库不能同步，所以设计组件的思路是在父组件里进行增删改查后的渲染操作（setstate），父组件app下有增删改查操作，因此有四个子层级组件，考虑到刚开始做删除功能的时候对li有操作，所以把对li的操作（删除），ui样式的变动和渲染统一放在了删除todoitem组件里，因此该组件的功能就是对li执行删除操作，和一些事件处理，组件内容应该返回li和和删除按钮，但是li是一个数组，所以需要做一个循环去不停的渲染todoitem，所以设计一个父组件todomain，todomain的功能就是对数据执行map，map里循环渲染todoitem组件，同事把数组传给子组件todoitem，所以todomain应该是从app（app组件有增加组件传递的数据，并把该数组存到了数据库（localDb），所以要获取这个数组进行渲染）继承数据，因此设计思路如图：

环境搭建工具：node.js,webpack,webpack-dev-server,babel编译jsx,es6
使用框架:react.js,localDb(利用localstorage机制封装的本地数据库),ant-design。(ps:未使用jquery)
安装 gitclone git@github.com:lernalot/react-todolist-.git ，npm install，注意node-modules里一定要有localDb文件夹。

• 接下来看增加的渲染方法

    // 添加
    handleClick(){
      this.setState({
          myList:[...this.state.myList,this.refs.myInput.value]
      },()=>{
          window.localStorage.setItem('item',this.state.myList)
      })
      this.refs.myInput.value = ""
    }

1. timeId是每一个li生成的时间戳，他是唯一的，删除组件传过来时间戳之后，遍历数据库，找到li，数组删除这个元素。

2. 值得注意的，这里相比增加方法的setState，这里渲染的是this.state.todos，而不是对数据库的渲染，主要是考虑到查询之后当前list有可能为一部分的数组，用户希望是在当前查询到的list删除和显示，所以就渲染了this.state.todos，但之后对数据库进行删除操作，才是真正的对数据做了修改。

• 删除操作deleteTodo

//删除
<button onClick={()=>{
                                    
                                    this.state.myList.splice(index,1);
                                    this.setState({
                                        myList:this.state.myList
                                    },()=>{
                                        window.localStorage.setItem('item',this.state.myList)
                                    })
                                }}>删除</button>

• 修改方法

//修改
<button onClick={()=>{
                                    var rel = window.prompt("请输入修改的内容");
                                    if(rel != null){
                                        this.state.myList.splice(index,1,rel)
                                        this.setState({
                                            myList:this.state.myList
                                        },()=>{
                                            window.localStorage.setItem('item',this.state.myList)
                                        })
                                    }
                                }}>修改</button>

• 查询方法queryList

queryList(queryArr){
    message.config({
        top:48,
        duration:1
    });
    if(this.state.todos.length == this.db.get('todos').length && queryArr.length == 0){
        message.warning('查询内容不存在');
        return;
    }
    if(queryArr.length == 0){
        message.warning('当前list不存在查询内容，已为您转到全部list');
        this.setState({
            todos:this.db.get('todos')
        });
    }else{
            this.setState({
            todos:queryArr
        });
    }     
}

1. queryArr是查询后得到的数组，通过查询组件传过来，查询的基本原理就是从当前list遍历（因为可能存在查询之后再查询操作，再查询的时候，app对数据库做了修改，但TodoQuery的数据库信息不会实时同步，但是this.state.todos会同步，所以根据当前list做查询，如果当前list查不到内容而且list长度和数据库长度不同，就重新渲染一遍this.state.todos，然后让用户再查询），查询思想就是判断查询的str是否出现在数组的元素里，通过indexOf方法判断索引是否大于-1即可。