ToDolist 增删改查

ToDolist 实现的主要功能有 

增加数据，

修改数据

删除数据

查询数据

下面是HTML页面的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

下面是index的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Todolist from './Todolist'//连接ToDolist文件

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

还有一个ToDolist.js的代码

import React from 'react'
class Todolist extends React.Component{
    constructor(){
        super()
        this.state={
            Mylist:[],
            MyInput:''
        }
    }

    // 页面加载前执行
    UNSAFE_componentWillMount(){

        var arry=window.localStorage.getItem('MyList')
        if(arry==null||arry==''){
            //这个if判断是判断arr是否为空，如果为空的话，就把这个arr变为数组 
            arry=[]
        console.log(arry)
        }else{
            //这里用的是分隔字符串，然后把分隔后的元素加到arr数组里面
            arry=arry.split(',')
        }    
        this.setState({
            // 这一步是把arry数组传给Mylist
            Mylist:arry
        })
    }
    //添加元素
    handleclick(){
        // 这一步是获取文本框的value值
        var val = this.refs.MyInput.value
        this.setState({
            Mylist:[...this.state.Mylist,val]
        },()=>{
            window.localStorage.setItem('MyList',this.state.Mylist)
        })
        // 这一步是当按下按钮的时候清空文本框里面的内容
        this.refs.MyInput.value=this.state.MyInput
    }

    //全部删除
    removeClick(){
        //这一步就比较简单了，直接让Mylist这个数组为空，就实现了全部清空
        this.setState({
            Mylist:[]
        },()=>{
            window.localStorage.setItem('MyList',this.state.Mylist)
        })
    }
    //删除其中的一个
    deleteOne(e){
        //这一步是通过找到按钮id，然后赋值给num，
        var num =e.target.id
           var arr=[...this.state.Mylist.splice(num,1)]//这一步是通过截取数组然后把里面的内容重新赋值给arr
           console.log(arr)
            this.setState({
                Mylist:[...this.state.Mylist]
            },()=>{
                window.localStorage.setItem('MyList',this.state.Mylist)
            })
    }
    handkeyclick(e){
        if(e.keyCode==13){
            //这一步是判断键盘按下的是否为enter键，如果按下的是enter键就执行此函数
            this.handleclick()
        } 
    }
    //修改
    upDate(i){
        var list=this.state.Mylist
        let rel =prompt('请输入你要修改的内容')//这一步是通过prompt属性的返回值修改
        if(rel !=null){  
            //这一步是先截取，然后再把修改后的内容加到数组里面
            list.splice(i,1,rel)
            this.setState({
                Mylist:list
            },()=>{
                window.localStorage.setItem('MyList',this.state.Mylist)
            })
        }
    }
    //渲染
    render(){
        return (
            <React.Fragment>
                <input type="text" ref='MyInput' onKeyDown={this.handkeyclick.bind(this)}></input><button onClick={this.handleclick.bind(this)}>添加</button>
                <ul>
                    {this.state.Mylist.map((m,i)=>{ return <li key={i}>{m}<button id={i} onClick={this.deleteOne.bind(this)}>dele</button><button onClick={this.upDate.bind(this,i)}>修改</button></li>})}
                </ul>
                <button onClick={this.removeClick.bind(this)}>清空</button>
            </React.Fragment>
        )
    }
}
// 向外暴露自己
export default Todolist

以上是我对Todolist的理解，如有不足，还请指出。

posted @ 2019-12-24 16:49  φ(*￣0￣)  阅读(241)  评论(0)  编辑  收藏  举报