ToDoList

主要功能　　

　　　　增加数据

　　　　删除数据

　　　　修改数据

　　　　查寻数据渲染页面

　　1 . HTML页面

　　

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="theme-color" content="#000000" />

    <meta name="description" content="Web site created using create-react-app" />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>

    <style>

      *{margin:0;padding:0;}

      .btn{border:none;background:none;color:red;}

      .btn-color{color:green;}

      li{border-bottom:0.1px solid #000; list-style: none;}

      li:nth-child(even){

        background:pink;

      }

      li:nth-child(odd){

        background:skyblue;

      }

    </style>

  </head>

  <body>

    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>

  </body>

</html>

　　

　　

　　2 . Index.js文件代码

import React from "react";

import ReactDOM from 'react-dom';

class TodoList extends React.Component{

    //构造函数

    constructor(){

        //super()超级继承React

        super();

        //声明state状态名为myList的数组和myInput字符串

        this.state={

            myList:[],

            myInput:""

        }

    }

    //生命周期方法在渲染之前调用

    UNSAFE_componentWillMount(){

        // 获取本地数据赋值给myList

        var myList = window.localStorage.getItem("myList");

        //判断myList是否是空的

        if(myList === null || myList === ""){

            //如果myList什么都没有，就让它等一个空数组

            myList=[]

        }else{

            //如果myList不是空的，拿到的数据是字符串需要通过split进行转换成数组

            myList = myList.split(",")

        }

        //把转换过的数组赋值给this.setState名为myList

        this.setState({

            myList:myList

        })

    }

    //添加的点击事件

    handleAddClick(){

        //拿到input的值

        var val = this.refs.myInput.value;

        //把input的值清空

        this.refs.myInput.value=this.state.myInput;

        //添加数据到this.state的myList

        this.setState({

            myList:[...this.state.myList,val]

        },()=>{

            //修改本地数据

            window.localStorage.setItem("myList",this.state.myList)

        })

    }

    //删除的点击事件

    handleDeleteClick(index){

        //获取this.state的myList数组，赋值给arr

        var arr = this.state.myList;

        //删除index下标的数据，后边的1是删除一条

        arr.splice(index,1)

        //删除过后重新赋值给this.state的myList

        this.setState({

            myList:arr

        },()=>{

            //修改本地数据

            window.localStorage.setItem("myList",this.state.myList)

        })

    }

    //修改的点击事件

    handleUpdateClick(index){

        //获取this.state的myList数组，赋值给arr

        var arr =  this.state.myList;

        //同过prompt获取要修改的内容

        var str = prompt("请输入修改内容");

        //判断是不是确认修改

        if(str!=null){

            //在arr数组中找到下标index,设置修改个数为1，修改的内容为str

            arr.splice(index,1,str);

            //修改过后把this.state的myList数据修改成给改过的数据

            this.setState({

                myList:arr

            },()=>{

                //修改本地数据

                window.localStorage.setItem("myList",this.state.myList)

            })

        }

    }

    //绑定键盘事件

    keyDown(e){

        //判断键盘按下的数字码是不是enter

       if(e.keyCode === 13){

           //如果是enter的编码，执行添加的点击事件

           this.handleAddClick();

       }

    }

    //清空的点击事件

    handleClearClick(){

        //直接把this.state的myList赋值成为空数组

        this.setState({

            myList:[]

        },()=>{

            //修改本地数据

            window.localStorage.setItem("myList",this.state.myList)

        })

    }

    // 渲染

    render(){

        return(

            <React.Fragment>

            {/* input是搜索框 button第一个是添加 button第二个是清空 */}

                <input ref="myInput" onKeyDown={this.keyDown.bind(this)} type="text"/><button onClick={this.handleAddClick.bind(this)}>添加</button><button onClick={this.handleClearClick.bind(this)}>清空</button>

                <ul>

                    {/* 通过map循环遍历this.state的myList 渲染页面 给第一个button绑定删除事件 给第二个button修改事件 */}

                    {this.state.myList.map((m,index) => {return <li key={index}>{m} <button onClick={this.handleDeleteClick.bind(this,index)}>删除</button><button onClick={this.handleUpdateClick.bind(this,index)}>修改</button></li>})}

                </ul>

            </React.Fragment>

        );

    }

}

//渲染页面

ReactDOM.render(<TodoList></TodoList>,document.querySelector("#root"))

　　

ToDoList 增删改查的更多相关文章

  1. python 10min系列之实现增删改查系统

    woniu-cmdb 奇技淫巧--写配置文件生成增删改查系统 视频教程 项目主页跪求github给个star, 线上demo,此页面都是一个配置文件自动生成的 详细的文章介绍和实现原理分析会发布在我的 ...

  2. 一起学Vue：CRUD(增删改查)

    目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...

  3. Dapper逆天入门~强类型，动态类型，多映射，多返回值，增删改查+存储过程+事物案例演示

    Dapper的牛逼就不扯蛋了,答应群友做个入门Demo的,现有园友需要,那么公开分享一下: 完整Demo:http://pan.baidu.com/s/1i3TcEzj 注 意 事 项:http:// ...

  4. ASP.NET从零开始学习EF的增删改查

           ASP.NET从零开始学习EF的增删改查           最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查

    系列目录 文章于2016-12-17日重写 在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...

  6. 通过Java代码实现对数据库的数据进行操作：增删改查

    在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao  xingming    xue ...

  7. Hibernate全套增删改查+分页

    1.创建一个web工程 2.导入jar包 3.创建Student表 4.创建实体类 package com.entity; public class Student { private Integer ...

  8. 使用 Json.Net 对Json文本进行 增删改查

    JSON 已经成为当前主流交互格式, 如何在C#中使用 Json.Net 对Json文本进行 增删改查呢?见如下代码 #region Create (从零创建) public static strin ...

  9. yii2 增删改查

    自己总结的yii2 advanced 版本的简单的增删改查,希望对大家有所帮助 1.gii生成的actionCreate()方法中 获取插入语句的id $id = $model->attribu ...

随机推荐

  1. mongodb增删改查基础语法

    转载:https://blog.csdn.net/u012206617/article/details/91047239 1. use DataBaseName 切换/创建数据库use mydb 2. ...

  2. matlab采用GPU运算

    >>help gpuThere are several options available for using your computer's graphics processing un ...

  3. Windows10 通用快捷键命令

    总想着甩掉鼠标,来一种只用键盘的各种行云流水般的快捷操作,在网上各个论坛,博客,搜索引擎,最后终于记录整理了出来! 为了尝试新的命令提示符下,只需     打开开始菜单,然后键入cmd并回车. 按Ct ...

  4. easyUi-datagrid 真分页 + 工具栏添加控件

    1.  新建Pager.js /** * * @param {any} el 元素 */ function showDataGrid1(el) { $(el).datagrid({ title: '分 ...

  5. Qt的信号和槽机制

    一.信号和槽机制 信号和槽用于两个对象之间的通信,我们希望任何对象都可以和其他对象进行通信.     当一个特殊的事情发生时便可以发射一个信号,而槽就是一个函数,它在信号发射后被调用来相应这个信号.( ...

  6. Python每日一题 009

    题目 有个目录,里面是你自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但是要分别列出来. 代码 参照网络上代码 # coding: utf-8 import os import re # ...

  7. MSSQLSERVER错误1

      错误信息 数据库日志记录 09/07/2017 16:10:31,登录,未知,Login failed for user 'NT AUTHORITY\SYSTEM'. 原因: 无法打开明确指定的数 ...

  8. CentOS 6.9 安装配置zeromq、jzmq

    官方安装配置链接 安装zeromq 步骤一.准备C语言环境 yum -y install gcc-c++ 步骤二.解压缩zeromq tar -zxf zeromq-4.1.6.tar.gz 步骤三. ...

  9. 【计算机网络mooc】一、概述

    1.网络概述: 网络分成两个层级,用交换机连接的是子网,用路由器连接的是互连网. 互联网Internet是一个特定的互连网internet 发展3阶段,第3阶段:ISP,互联网服务提供商,缴纳费用获得 ...

  10. 监控软件munin安装设置

    准备工作需要web环境需要设置epel源 wget -P /etc/yum.repos.d/ http://mirrors.aliyun.com/repo/epel-6.repo 服务器端安装设置 y ...