react综合案例-todolist、localstorage缓存数据
2024-08-23 22:56:05
1、工具类storage.js
var app ={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
delete(key){
localStorage.removeItem(key);
},
countFalseNum(key){
let count=new Number();
let list = JSON.parse(localStorage.getItem(key));
list.map(function (value,key) {
if(value.checked==false){
count = count+;
}
})
return count;
},
countTrueNum(key){
let count=new Number();
let list = JSON.parse(localStorage.getItem(key));
list.map(function (value,key) {
if(value.checked==false){
count = count+;
}
})
return count;
}
}
export default app;
2、todolist案例实现
import React from 'react';
import storage from '../modules/storage';
class Todolist1 extends React.Component{
constructor(props){
super(props);
this.state={
list:[],
finishList:[
/* {
title:"录制java",
checked:true
},
{
title:"录制react",
checked:false
},
{
title:"录制python",
checked:true
}*/
]
};
} //生命周期函数 页面加载就会触发
componentDidMount(){
//获取缓存的数据
let todoList = storage.get("TodoList");
if(todoList){
this.setState({
finishList:todoList
})
}
}
addData=(e)=>{
if(e.keyCode==){
let title=this.refs.title.value;
let tempList = this.state.finishList;
tempList.push({
title:title,
checked:false
})
this.setState({
list:tempList
});
//增加框设置为空
this.refs.title.value="";
//缓存数据,使用localStorage，而将一个对象转为字符串使用JSON.stringify()函数
storage.set("TodoList",tempList);
}
} changeState=(key)=>{
let templist =this.state.finishList;
templist[key].checked =!templist[key].checked;
this.setState({
list:templist
});
storage.set("TodoList",templist);
}
deleteData=(key)=>{
let templist =this.state.finishList;
templist.splice(key,);
this.setState({
list:templist
})
storage.set("TodoList",templist);
} render(){
return (
<div>
Todolist index
<h2>Todolist演示</h2>
<input ref="title" onKeyUp={this.addData}/>
<hr/>
<h2> </h2>
<h2>正在进行</h2> <hr/>
{
this.state.finishList.map( (value,key)=> {
if(value.checked==false){
return(
<li key={key}>
<input type="checkbox" checked={value.checked} onChange={this.changeState.bind(this,key)}/>{value.title}
---<button onClick={this.deleteData.bind(this,key)}>删除</button>
</li>
)
}
})
}
<h2>已完成事项</h2>
{
this.state.finishList.map( (value,key)=> {
if(value.checked==true){
return(
<li key={key}>
<input type="checkbox" checked={value.checked} onChange={this.changeState.bind(this,key)} />{value.title}
---<button onClick={this.deleteData.bind(this,key)}>删除</button>
</li>
)
}
})
}
<hr/> </div>
)
}
}
export default Todolist1;
3、app.js加载该组建
import React, { Component } from 'react';
import './assets/css/App.css';
import Todolist1 from './components/Todolist1';
class App extends Component {
render() {
return(
<div>
你好
<Todolist1/>
</div>
)
}
}
export default App;
注意：
、localStorage的使用
、this对象的指向
最新文章
- Struts2 源码分析——DefaultActionInvocation类的执行action
- web.py框架入门
- 解决Debian系统的Crontab执行时间时差问题
- paip.提升性能--多核cpu中的java/.net/php/c++编程
- 结合 CSS3 & Canvas 模拟人行走的效果
- ubuntu 安装 OpenCv 及其Qt的开发环境配置
- 使用Android Studio打Andorid apk包的流程
- 数据库必会必知 之 SQL四种语言：DDL DML DCL TCL（转）
- .NET简谈插件系统开发模式
- [Practical Git] Filter commit history with git log arguments
- Network boot from AMD Am79C970A
- 使用数据库绑定ListBox控件
- poj 3368 Frequent values（段树）
- Mybatis逆向生成Mapper文件
- 《Java编程思想》读书笔记-基本规范、注释、static关键字、import关键字
- WIN10 困扰多时的屏幕亮度 终于可以调节了-完美 -更新2018年2月28日
- Volatile 关键字 内存可见性
- 正确的类引用却显示* cannot be resolved
- Nginx防止恶意域名解析
- MapRedece(多表关联)