①、功能代码实现:

  1. 添加数据
  2. 查询数据,展示
  3. 删除数据
  4. 修改数据

②、数据持久化操作

localStorage.setItem('key',value)

var value = localStorage.getItem('key')

③、修改state属性

this.setState(obj,回调函数),修改state属性的函数

  • 参数1是要更新的数据对象,
  • 参数2是回调函数,参数2的主要作用是,用于展示更新后的state数据

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

1、先获取本地储存数据

//构造方法
constructor() {
super()
this.state = {
myList: [] //展示列表
}
} //加载时执行
UNSAFE_componentWillMount() {
//从localStrong中获取myList
var myList = localStorage.getItem('myList')
if (myList === null || myList === '') {
myList = []//初始化myList数组
} else {
//把字符串转数组
myList = myList.split(',')
}
//设置状态值
this.setState({
myList: myList
})
}
//封装本地储存,以便重复使用
onState() {
this.setState({
myList: this.state.myList
}, () => {
//把更新后的state数据更新到localStrong中
localStorage.myList = this.state.myList
})
}

2、添加数据

      {/* 文本框   绑定onKeyDown键盘事件 */}
<input className="inp" ref="myInput" type="text" onKeyDown={this.onKeyDown.bind(this)} />
{/* 添加按钮 绑定onMyList添加方法 */}
<button className='btn' onClick={this.onMyList.bind(this)}>添加</button>
//按钮点击事件方法,添加方法
onMyList() {
var val = this.refs.myInput.value
//在内存中添加
this.setState({
//...为展开运算符,将this.state.list内容放到当前的list中
myList: [...this.state.myList, val]
}, () => {
//把更新后的state数据更新到localStrong中
localStorage.myList = this.state.myList
this.refs.myInput.value = ''//点击添加按钮,清空输入框
})
}

  渲染页面

{
<ul className='ul'>
{/* map循环 */}
{this.state.myList.map((m, i) => {
return <li key={i}>
{/* m,每个值 */}
{m}
</li>
})}
</ul>
}

  绑定键盘事件

//键盘事件,回车添加
onKeyDown(e) {
if (e.keyCode === 13) {
//调用本地储存方法
this.onMyList()
}
}

效果:

3、删除数据

{/* 删除按钮  绑定onDelete删除方法 */}
<button onClick={this.onDelete.bind(this, i)}>删除</button>
    //点击展示列表事件方法,用于删除展示元素
onDelete(i) {
this.state.myList.splice(i, )
var ok = window.confirm('确认删除吗?')
if (ok) {
//调用本地储存方法
this.onState()
}
}

效果:

这里考虑到动图大小没录弹框

4、修改数据

{/* 修改按钮  绑定onUpdate修改方法 */}
<button onClick={this.onUpdate.bind(this, i)}>修改</button>
    //修改方法
onUpdate(i) {
//弹出输入框,用于填写新内容
var str = prompt('请输入修改内容:')
if (str != null) {
//二次确认
var ok = window.confirm('确认修改吗?')
if (ok) {
this.state.myList.splice(i, 1, str)
//调用本地储存方法
this.onState()
}
}
}

效果:

5、清空数据

在这里我又加了一个清空的,非常简单

 {/* 清空按钮   绑定onClear清空方法 */}
<button className='btn' onClick={this.onClear.bind(this)}>清空</button>
//点击清空本地储存
onClear() {
this.setState({
myList: []
}, () => {
//把更新后的state数据更新到localStrong中
localStorage.myList = this.state.myList
})
}

效果:

好啦,本期教学到此结束,有哪里不好的欢迎提出,谢谢~~ bay~~

React_TODOList 数据增删改查的更多相关文章

  1. salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...

  2. C#操作Excel数据增删改查(转)

    C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...

  3. C#操作Excel数据增删改查示例

    Excel数据增删改查我们可以使用c#进行操作,首先创建ExcelDB.xlsx文件,并添加两张工作表,接下按照下面的操作步骤即可 C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文 ...

  4. 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  5. 一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子

    备注:这是我辅导的一个项目开发组的一个例子,用文章的方式分享出来,给更多的朋友参考.其实我们这几年的项目中,都不怎么使用服务器控件的形式了,而是更多的采用MVC这种开发模式.但是,如果项目的历史背景是 ...

  6. MVC设计模式((javaWEB)在数据库连接池下,实现对数据库中的数据增删改查操作)

    设计功能的实现: ----没有业务层,直接由Servlet调用DAO,所以也没有事务操作,所以从DAO中直接获取connection对象 ----采用MVC设计模式 ----采用到的技术 .MVC设计 ...

  7. IDEA搭建SSM实现登录、注册,数据增删改查功能

     本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...

  8. C#在winform中操作数据库,实现数据增删改查

    1.前言: 运行环境:VS2013+SQL2008+Windows10 程序界面预览: 使用的主要控件:dataGridview和menuStrip等. 2.功能具体介绍: 1.首先,我们要先实现基本 ...

  9. jeesite应用实战(数据增删改查),认真读完后10分钟就能开发一个模块

    jeesite配置指南(官方文档有坑,我把坑填了!)这篇文章里,我主要把jeesite官方给出的帮助文档的坑填了,按照里面的方法可以搭建起来jeesite的站点.系统可以运行以后,就可以进入开发模块了 ...

随机推荐

  1. 如何使用k3OS和Argo进行自动化边缘部署?

    本文转自边缘计算k3s社区 前 言 随着Kubernetes生态系统的发展,新的技术正在被开发出来,以实现更广泛的应用和用例.边缘计算的发展推动了对其中一些技术的需求,以实现将Kubernetes部署 ...

  2. 2020牛客暑期多校训练营 第二场 A All with Pairs 字符串hash KMP

    LINK:All with Pairs 那天下午打这个东西的时候状态极差 推这个东西都推了1个多小时 (比赛是中午考试的我很困 没睡觉直接开肝果然不爽 一开始看错匹配的位置了 以为是\(1-l\)和\ ...

  3. luogu P4321 随机漫游 期望dp 二进制 高斯消元

    LINK:随机漫游 非常妙的一道题. 容易想到倒推期望. 设状态 f[i][j]表示到达第i个点 此时已经到达的集合为j能走到全集的期望边数. 只要求出来这个就能O(1)回答询问. \(f[i][j] ...

  4. java -jar .jar中没有主清单属性

    pom里加上 <build> <plugins> <plugin> <groupId>org.springframework.boot</grou ...

  5. Java和Scala容器转换

    参考:https://blog.csdn.net/dymkkj/article/details/77921573 Java和Scala互操作的一个重要的内容就是容器的转换,容器是一个语言的数据结构,表 ...

  6. Python机器学习——预测分析核心算法PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取提取码:7qi1 在学习和研究机器学习的时候,面临令人眼花缭乱的算法,机器学习新手往往会不知所措.本书从算法和Python语言实现的角度,帮助读者认识机器学习. 本书专注于两类核心的" ...

  7. Qt 乱码

    个人认识: 乱码的原因: 在编写代码时-->文件的格式--->编译器对文件进行编译的时候看到的只是二进制(乱码就出现在这里) 应合适方法 通知编译器(为什么说通知编译器呢?因为个人觉得这样 ...

  8. 从SpringBoot源码分析 配置文件的加载原理和优先级

    本文从SpringBoot源码分析 配置文件的加载原理和配置文件的优先级     跟入源码之前,先提一个问题:   SpringBoot 既可以加载指定目录下的配置文件获取配置项,也可以通过启动参数( ...

  9. 【BZOJ2724】蒲公英 题解(分块+区间众数)

    题目链接 题目大意:给定一段长度为$n$的序列和$m$次询问,每次询问区间$[l,r]$内的最小的众数.$n\leq 40000,a_i\leq 10^9$ --------------------- ...

  10. 3月28日考试 题解(二分答案+树形DP+数学(高精))

    前言:考试挂了很多分,难受…… --------------------- T1:防御 题意简述:给一条长度为$n$的序列,第$i$个数的值为$a[i]$.现让你将序列分成$m$段,且让和最小的一段尽 ...