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 !=