React_TODOList 数据增删改查
①、功能代码实现:
- 添加数据
- 查询数据,展示
- 删除数据
- 修改数据
②、数据持久化操作
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 数据增删改查的更多相关文章
- salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的标签相对简单,如果需要深入了解VF相关知识以及标签, 可以通过以下链接查看或下载 ...
- C#操作Excel数据增删改查(转)
C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...
- C#操作Excel数据增删改查示例
Excel数据增删改查我们可以使用c#进行操作,首先创建ExcelDB.xlsx文件,并添加两张工作表,接下按照下面的操作步骤即可 C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文 ...
- 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建 VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...
- 一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子
备注:这是我辅导的一个项目开发组的一个例子,用文章的方式分享出来,给更多的朋友参考.其实我们这几年的项目中,都不怎么使用服务器控件的形式了,而是更多的采用MVC这种开发模式.但是,如果项目的历史背景是 ...
- MVC设计模式((javaWEB)在数据库连接池下,实现对数据库中的数据增删改查操作)
设计功能的实现: ----没有业务层,直接由Servlet调用DAO,所以也没有事务操作,所以从DAO中直接获取connection对象 ----采用MVC设计模式 ----采用到的技术 .MVC设计 ...
- IDEA搭建SSM实现登录、注册,数据增删改查功能
本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...
- C#在winform中操作数据库,实现数据增删改查
1.前言: 运行环境:VS2013+SQL2008+Windows10 程序界面预览: 使用的主要控件:dataGridview和menuStrip等. 2.功能具体介绍: 1.首先,我们要先实现基本 ...
- jeesite应用实战(数据增删改查),认真读完后10分钟就能开发一个模块
jeesite配置指南(官方文档有坑,我把坑填了!)这篇文章里,我主要把jeesite官方给出的帮助文档的坑填了,按照里面的方法可以搭建起来jeesite的站点.系统可以运行以后,就可以进入开发模块了 ...
随机推荐
- 如何使用k3OS和Argo进行自动化边缘部署?
本文转自边缘计算k3s社区 前 言 随着Kubernetes生态系统的发展,新的技术正在被开发出来,以实现更广泛的应用和用例.边缘计算的发展推动了对其中一些技术的需求,以实现将Kubernetes部署 ...
- 2020牛客暑期多校训练营 第二场 A All with Pairs 字符串hash KMP
LINK:All with Pairs 那天下午打这个东西的时候状态极差 推这个东西都推了1个多小时 (比赛是中午考试的我很困 没睡觉直接开肝果然不爽 一开始看错匹配的位置了 以为是\(1-l\)和\ ...
- luogu P4321 随机漫游 期望dp 二进制 高斯消元
LINK:随机漫游 非常妙的一道题. 容易想到倒推期望. 设状态 f[i][j]表示到达第i个点 此时已经到达的集合为j能走到全集的期望边数. 只要求出来这个就能O(1)回答询问. \(f[i][j] ...
- java -jar .jar中没有主清单属性
pom里加上 <build> <plugins> <plugin> <groupId>org.springframework.boot</grou ...
- Java和Scala容器转换
参考:https://blog.csdn.net/dymkkj/article/details/77921573 Java和Scala互操作的一个重要的内容就是容器的转换,容器是一个语言的数据结构,表 ...
- Python机器学习——预测分析核心算法PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书
点击获取提取码:7qi1 在学习和研究机器学习的时候,面临令人眼花缭乱的算法,机器学习新手往往会不知所措.本书从算法和Python语言实现的角度,帮助读者认识机器学习. 本书专注于两类核心的" ...
- Qt 乱码
个人认识: 乱码的原因: 在编写代码时-->文件的格式--->编译器对文件进行编译的时候看到的只是二进制(乱码就出现在这里) 应合适方法 通知编译器(为什么说通知编译器呢?因为个人觉得这样 ...
- 从SpringBoot源码分析 配置文件的加载原理和优先级
本文从SpringBoot源码分析 配置文件的加载原理和配置文件的优先级 跟入源码之前,先提一个问题: SpringBoot 既可以加载指定目录下的配置文件获取配置项,也可以通过启动参数( ...
- 【BZOJ2724】蒲公英 题解(分块+区间众数)
题目链接 题目大意:给定一段长度为$n$的序列和$m$次询问,每次询问区间$[l,r]$内的最小的众数.$n\leq 40000,a_i\leq 10^9$ --------------------- ...
- 3月28日考试 题解(二分答案+树形DP+数学(高精))
前言:考试挂了很多分,难受…… --------------------- T1:防御 题意简述:给一条长度为$n$的序列,第$i$个数的值为$a[i]$.现让你将序列分成$m$段,且让和最小的一段尽 ...