八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））
一、项目功能概述
示例网址：http://www.todolist.cn/
功能：
- 输入待做事项，回车，把任务添加到 【正在进行】
- 【正在进行】 任务，勾选之后，变成已【经完成事项】
- 【已完成事务】，勾选之后，变回 【正在进行 】
- 最后的删除按钮点之后删除事务
二、项目实现
2.1简单的添加、删除功能
【TodoList2 .js】
import React,{Component} from 'react';
import './css/todolist.css';
class TodoList2 extends Component{
constructor(props){
super(props);
this.state={
msg:'待做事项列表',
list:[]
}
}
//此处用第2种方法ref获取节点值复习一下之前知识；（正常用e.target.value获取）
handlelist=()=>{
let templist=this.state.list; //获取state里的内容，定义为一个临时列表
templist.push(this.refs.list.value); //把input里的值推到临时列表，返回：一个下标值
this.refs.list.value=''; //添加完成后清除输入框里的内容
this.setState({
list:templist //让列表值等于刚才的临时列表
})
}
//删除列表函数
dellist=(key)=>{
let templist=this.state.list;
templist.splice(key,1); // splice方法向/从数组中添加/删除项目，然后返回被删除的项目
this.setState({
list:templist
})
}
render(){
return(
<div>
<h1>{this.state.msg}</h1>
<input ref='list' /><button onClick={this.handlelist}>添加</button>
<hr/>
<h2>待做事项</h2>
<ol className="list">
{
// 此处map(function(value,key){})如果这样写不加箭头，指向就是document当前文档。加了才指向当前函数
//此处button onclick里写法意思是：把当前函数的当前li的key绑定到dellist函数上去，方法调用
this.state.list.map((value,key)=>{
return(<li key={key}>{value} <button onClick={this.dellist.bind(this,key)}>删除</button></li>)
})
}
</ol>
</div>
)
}
}
export default TodoList2;
【App.js】
import React from 'react';
import './App.css';
import Demo from './components/toDoList2'
function App() {
return (
<div className="App">
<Demo />
</div>
);
}
export default App;
【components/css/todolist.css】
.list{
padding-left:440px;
padding-top:80px;
color: blueviolet;
width:200px;
}
效果：在input输入文本后点添加，会自动在待做事项显示；点删除，会删除对应事项；
2.2完整实现
【todolistOk.js】
import React, { Component } from 'react';
class TodoList extends Component {
constructor(props){
super(props);
this.state={
msg:'todolist：',
list:[
{title:'录制ionic',checked:true},
{title:'录制nodejs',checked:false},
{title:'录制egg.js',checked:true},
{title:'录制vue',checked:false}
]
}
}
//0.把input值添加到state的list里
addList=(e)=>{
if(e.keyCode==13){ //如果按下的是回车键则执行以下代码
let tempList=this.state.list; //获取state的默认列表为临时列表
let title=e.target.value; //把input输入的值赋值给临时title,此处也可用ref来传值:this.ref.ref_value.value
tempList.push({title:title,checked:false}) //把临时title推到templist临时列表时，checked默认为false
this.setState({ //把临时列表正式加入的state的列表
list:tempList
});
e.target.value=''; //添加成功后清除input为空
}
}
//checkbox处理函数注意传过来的key值源自.bind(this,key)
handleCheck=(key)=>{
let tempList=this.state.list;
tempList[key].checked=!tempList[key].checked; //把对应的表的checked的值取反，即：是false变true，是true变false;
this.setState({
list:tempList
})
}
//删除事项函数
dellist=(key)=>{
let tempList=this.state.list;
tempList.splice(key,1)
this.setState({
list:tempList
})
}
render() {
return (
<div>
{this.state.msg}<input onKeyUp={this.addList} /><br/>
<hr/>
<h2>待办事项：</h2>
<ul>{
this.state.list.map((value,key)=>{
if(value.checked==false){ //!value.checked 也可写成这个
return(
<li key={key}>
<input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />
{value.title}--
<button onClick={this.dellist.bind(this,key)}>删除</button>
</li>
)
}
})
}</ul><br/>
<hr/>
<h2>已完成事项：</h2>
<ul>{
this.state.list.map((value,key)=>{
if(value.checked==true){ //value.checked 也可写成这个
return(
<li key={key}>
<input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />
{value.title}--
<button onClick={this.dellist.bind(this,key)}>删除</button>
</li>
)
}
})
}</ul><br/>
</div>
);
}
}
export default TodoList;
【App.js】
import React from 'react';
import './App.css';
import Demo from './components/todolistOk'
function App() {
return (
<div className="App">
<Demo />
</div>
);
}
export default App;
效果：（功能详情见头部：一、功能概述）（具体样式区别写css即可）
2.3实现Todolist数据本地缓存（生命周期函数）
2.3.0 local storage本地缓存函数
【local storage使用详见】：https://blog.csdn.net/u010132177/article/details/103029716
写入缓存写法：
localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表
2.3.1生命周期函数：componentDidMount()
【概念】函数名固定，只要页面加载，就会执行此函数内的内容；
页面加载就读取缓存写法：
//3.生命周期函数componentDidMount() 页面加载就会触发
componentDidMount(){
var todolist=JSON.parse(localStorage.getItem('todolist')); //json.parse转化成对象（获取缓存的数据- 字符串格式）
if(todolist){
this.setState({
list:todolist
})
}
}
详细代码成品：
【todolistOk.js】
功能：
- 实现页面刷新之后数据也不丢失
- 具体实现：把数据存入localstorage里，页面加载时直接读取localstorage.
import React, { Component } from 'react';
import { stringify } from 'querystring';
class TodoList extends Component {
constructor(props){
super(props);
this.state={
msg:'todolist：',
list:[
/* {title:'录制ionic',checked:true},
{title:'录制nodejs',checked:false},
{title:'录制egg.js',checked:true},
{title:'录制vue',checked:false}
*/
]
}
}
//0.把input值添加到state的list里
addList=(e)=>{
if(e.keyCode==13){ //如果按下的是回车键则执行以下代码
let tempList=this.state.list; //获取state的默认列表为临时列表
let title=e.target.value; //把input输入的值赋值给临时title,此处也可用ref来传值:this.ref.ref_value.value
tempList.push({title:title,checked:false}) //把临时title推到templist临时列表时，checked默认为false
this.setState({ //把临时列表正式加入的state的列表
list:tempList
});
e.target.value=''; //添加成功后清除input为空
localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表
}
}
//1. checkbox处理函数注意传过来的key值源自.bind(this,key)
handleCheck=(key)=>{
let tempList=this.state.list;
tempList[key].checked=!tempList[key].checked; //把对应的表的checked的值取反，即：是false变true，是true变false;
this.setState({
list:tempList
})
localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表
}
//2. 删除事项函数
dellist=(key)=>{
let tempList=this.state.list;
tempList.splice(key,1)
this.setState({
list:tempList
})
localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表
}
//3.生命周期函数componentDidMount() 页面加载就会触发
componentDidMount(){
var todolist=JSON.parse(localStorage.getItem('todolist')); //json.parse转化成对象（获取缓存的数据- 字符串格式）
if(todolist){
this.setState({
list:todolist
})
}
}
render() {
return (
<div>
{this.state.msg}<input onKeyUp={this.addList} /><br/>
<hr/>
<h2>待办事项：</h2>
<ul>{
this.state.list.map((value,key)=>{
if(value.checked==false){
return(
<li key={key}>
<input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />
{value.title}--
<button onClick={this.dellist.bind(this,key)}>删除</button>
</li>
)
}
})
}</ul><br/>
<hr/>
<h2>已完成事项：</h2>
<ul>{
this.state.list.map((value,key)=>{
if(value.checked==true){
return(
<li key={key}>
<input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />
{value.title}--
<button onClick={this.dellist.bind(this,key)}>删除</button>
</li>
)
}
})
}</ul><br/>
</div>
);
}
}
export default TodoList;
【App.js】不变
