TODOList 数据增删改查的操作
TODOList 数据增删改查的操作
思路：
1、UI界面怎么实现 UI（User Interface）
2、功能代码实现
（1）添加数据
（2）查询数据，展示
（3）删除数据
（4）修改数据
3、数据持久化操作
一、UI界面怎么实现
1.1 UI 概述
UI是User Interface的缩写。其中，“Interface”前缀“Inter”的意思是“在一起、交互”，而翻译成中文“界面”之后， “交互”的概念没能得到体现。
用户研究、交互设计、界面设计。
首先，UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。其次，UI是指信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。最后，UI的高级形态可以理解为User Invisible。
二、功能代码实现
2.1 添加数据
对输入框绑定事件点击提交按钮使输入框内容生成到页面上
// 输入框内容提取并重设
msg(e){
this.setState({
inputValue : e.target.value
})
}
// 按钮点击事件添加内容 (在内存中添加)
add(){
this.setState({
// ...扩展运算符展开之后(不合并)
list : [...this.state.list,this.state.inputValue],
// 清空文本框的数据
inputValue:''
});
}
可以添加键盘事件，增加用户体验
keyDown(e){
if(e.keyCode === 13){
this.add();
}
}
2.2 查询数据，展示
实现数据添加，并查找数据渲染到页面上
2.3 删除数据
添加删除按钮事件，用于删除展示元素
delete(index){
var list = [...this.state.list];
list.splice(index,1);
this.setState({
list:list
})
}
2.4 修改数据
添加修改按钮事件，用于修改展示元素
update(index){
//弹出输入框，用于填写新内容
var arr = this.state.list;
// prompt()方法用于显示可提示用户进行输入的对话框。
// 这个方法返回用户输入的字符串。
var rel = window.prompt('请输入新内容：');
if(rel != null){
arr.splice(index,1,rel);
this.setState({
list:arr
})
}
}
注意：
- 字母大小写区分，尤其是方法和属性的大小写
- 最好用驼峰命名法命名变量等
三、数据持久化操作
3.1 数据持久化的实现
使用react自带的方法实现本地数据初始化
// 加载时执行 (渲染前执行 页面输出前执行) 时 初始化浏览器本地储存的数据
componentDidMount(){
//从localStrong中获取myList
var myList=window.localStorage.getItem('myList');
if(myList===null || myList === ''){
myList = []//初始化myList数组
}else{
// 用split()方法使得到的字符串转为数组
myList = myList.split(',');
}
// 重设state值
this.setState({
list : myList
});
// 用来清空本地储存（用的时候放开注释）
// window.localStorage.clear();
}
增删查改时都要存入本地
// 即使用setState()方法，this.setState(obj,function)，修改state属性的函数，
// 参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据
// 以添加事件为例
add(){
this.setState({
// ...扩展运算符展开之后(不合并)
list : [...this.state.list,this.state.inputValue],
// 清空文本框的数据
inputValue:''
},()=>{
// 将this.state.myList的内容放到当前myList中
console.log(this.state.list);
window.localStorage.setItem('myList',this.state.list)
});
}
四、总代码
要复制的同志要在这取哦
index.js页面
import React from 'react';
import ReactDOM from 'react-dom';
// 引入Todolist
import Todolist from './Todolist';
ReactDOM.render(<Todolist></Todolist>, document.getElementById('root'));
Todolist.js页面
// 引入react
import React from 'react';
// 创建一个Todolist类组件
class Todolist extends React.Component{
constructor(){
super();
this.state = {
list : [],
inputValue : ''
}
};
// 加载时执行 初始化浏览器本地储存的数据
componentDidMount(){
var myList=window.localStorage.getItem('myList');
if(myList===null || myList === ''){
myList = []
}else{
myList = myList.split(',');
}
this.setState({
list : myList
});
// 用来清空本地储存（用的时候放开注释）
// window.localStorage.clear();
}
// 输入框内容提取
msg(e){
this.setState({
inputValue : e.target.value
})
}
// 添加
add(){
this.setState({
list : [...this.state.list,this.state.inputValue],
inputValue:''
},()=>{
console.log(this.state.list);
window.localStorage.setItem('myList',this.state.list)
});
}
// 键盘事件
keyDown(e){
if(e.keyCode === 13){
this.add();
}
}
// 删除
delete(index){
var list = [...this.state.list];
list.splice(index,1);
this.setState({
list:list
},()=>{
console.log(this.state.list);
window.localStorage.setItem('myList',this.state.list)
})
}
// 修改
update(index){
var arr = this.state.list;
var rel = window.prompt('请输入新内容：');
if(rel != null){
arr.splice(index,1,rel);
this.setState({
list:arr
},()=>{
console.log(this.state.list);
window.localStorage.setItem('myList',this.state.list)
})
}
}
render(){
return(
<React.Fragment>
<input type = "text" value = {this.state.inputValue} onChange={this.msg.bind(this)} onKeyDown={this.keyDown.bind(this)}></input>
<button onClick={this.add.bind(this)}>添加</button>
<ul>
{/* //item值 index下标 */}
{this.state.list.map((item,index)=>{return <li key = {index}>{index},{item}
<button onClick={this.update.bind(this,index)}>修改</button>
<button onClick={this.delete.bind(this,index)}>删除</button></li>})}
</ul>
</React.Fragment>
)
}
};
// 暴露出Todolist组件
export default Todolist;
需要用到的知识点：
- 数据持久化操作 :
localStorage.setItem(‘key’,value)
var value = localStorage.getItem(‘key’) - this.setState(obj,function)，修改state属性的函数，参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据
setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新 - array.splice(index,howmany,item1,…,itemX)
index 必需。规定从何处添加/删除元素。
howmany 可选。规定应该删除多少元素。
item1, …, itemX 可选。要添加到数组的新元素 - prompt()方法用于显示可提示用户进行输入的对话框。
这个方法返回用户输入的字符串。 - map()方法调用的函数有三个参数 map( function ( currentValue , index , arr ), thisValue)
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。