ToDoList 增删改查
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 增删改查的更多相关文章
- python 10min系列之实现增删改查系统
woniu-cmdb 奇技淫巧--写配置文件生成增删改查系统 视频教程 项目主页跪求github给个star, 线上demo,此页面都是一个配置文件自动生成的 详细的文章介绍和实现原理分析会发布在我的 ...
- 一起学Vue：CRUD(增删改查)
目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...
- Dapper逆天入门~强类型，动态类型，多映射，多返回值，增删改查+存储过程+事物案例演示
Dapper的牛逼就不扯蛋了,答应群友做个入门Demo的,现有园友需要,那么公开分享一下: 完整Demo:http://pan.baidu.com/s/1i3TcEzj 注 意 事 项:http:// ...
- ASP.NET从零开始学习EF的增删改查
ASP.NET从零开始学习EF的增删改查 最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查
系列目录 文章于2016-12-17日重写 在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...
- 通过Java代码实现对数据库的数据进行操作：增删改查
在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao xingming xue ...
- Hibernate全套增删改查+分页
1.创建一个web工程 2.导入jar包 3.创建Student表 4.创建实体类 package com.entity; public class Student { private Integer ...
- 使用 Json.Net 对Json文本进行 增删改查
JSON 已经成为当前主流交互格式, 如何在C#中使用 Json.Net 对Json文本进行 增删改查呢?见如下代码 #region Create (从零创建) public static strin ...
- yii2 增删改查
自己总结的yii2 advanced 版本的简单的增删改查,希望对大家有所帮助 1.gii生成的actionCreate()方法中 获取插入语句的id $id = $model->attribu ...
随机推荐
- 理解CSV格式规范（解析CSV必备）
什么是CSV逗号分隔值(Comma-Separated Values,CSV),其文件以纯文本形式存储表格数据(数字和文本),文件的每一行都是一个数据记录.每个记录由一个或多个字段组成,用逗号分隔.使 ...
- 【MySQL】mysql查询强制大小写及替换字段
强制大小写 select * from test where name like BINARY '%Adc%' mysql替换字段 update test set name= REPLACE (nam ...
- AcWing 217. 绿豆蛙的归宿 （概率期望+拓扑排序）打卡
给出一个有向无环的连通图,起点为1,终点为N,每条边都有一个长度. 数据保证从起点出发能够到达图中所有的点,图中所有的点也都能够到达终点. 绿豆蛙从起点出发,走向终点. 到达每一个顶点时,如果有K条离 ...
- express设置允许跨域访问该服务.
const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, ...
- linux下关闭Oracle及关机
参考了如下文章 linux环境下连接oracle 并操作oracle数据库 1 先看lsnrctl和oracle service是否都启动了.如果没有启动,先启动:如net start,启动所有服务. ...
- (12)C++ 继承
1继承语法 class Base { public: void print() { cout << "Base" << endl; } }; class S ...
- Nodejs-交互式版本管理
n - npm:Interactively Manage Your Node.js Versions
- gradle打成jar包报错 "错误: 找不到或无法加载主类 App"（已经配置过主类）
文章目录 将gradle打成jar包(包括依赖) 运行jar包 报错 原因(src自己手动创建的) 解决(添加src目录) 将gradle打成jar包(包括依赖) jar { manifest { a ...
- day 53-1 Django基础三之视图函数
Django基础三之视图函数 本节目录 一 Django的视图函数view 二 CBV和FBV 三 使用Mixin 四 给视图加装饰器 五 Request对象 六 Response对象 一 Dja ...
- elasticsearch-6.0.1安装
elasticsearch-6.0.1安装 0. 介绍: ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎:是目前全文搜索引擎的首选. ...